Question

这是我要在SVG标签中添加条件的代码：

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                  width="60px" height="65px" viewBox="0 0 60 92" enable-background="new 0 0 60 92" xml:space="preserve">
    <defs>
                   <linearGradient *ngIf="!compareCompanyRevenue" id="progress1019" x1="0" y1="1" x2="0" y2="0">
                      <stop id="stop1005" offset="0" stop-color="#e1edf3" />
                      <stop id="stop2005" offset="0" stop-color="#02ABBA" />
                    </linearGradient>
                    <linearGradient *ngIf="compareCompanyRevenue" id="progress1019" x1="0" y1="1" x2="0" y2="0">
                      <stop id="stop1005" offset="0" stop-color="#02ABBA" />
                      <stop id="stop2005" offset="0" stop-color="#e1edf3" />
                    </linearGradient> 
    </defs>

//up-arrow
    <path *ngIf="!compareCompanyRevenue" fill-rule="evenodd" clip-rule="evenodd" fill="url(#progress1019)" stroke="#02ABBA" stroke-miterlimit="10" d=""/>

//down-arrow
    <path *ngIf="compareCompanyRevenue" fill-rule="evenodd" clip-rule="evenodd" fill="url(#progress1019)" stroke="#02ABBA" stroke-miterlimit="10" d=""/>
    </svg>

test.ts //目前，我正在尝试使用javascript填充

document.getElementById("stop1005").setAttribute("offset", "0.25");
document.getElementById("stop2005").setAttribute("offset", "0.25");

根据条件需要更改“ linearGradient”标签（停止色）。但是不要   影响我的更改。

上下箭头正常工作，但我无法从顶部或底部填充svg   根据我的ngIf条件

ng如果不适用于SVG图标，则填充角度6

0 个答案: