Question

我的页面上有一个想要多次使用的图标。我希望从服务器数据中动态填充图标（将填充其中的多少）。

到目前为止，我得到的是：

<svg version="1.1" id="myWarningId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 27.8 24" style="enable-background:new 0 0 27.8 24;" xml:space="preserve">
<defs>
    <symbol viewBox="0 0 27.8 24" y="0px" x="0px" id="warning" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css">
            #myWarningId .st1{fill:#FFFFFF;}
            #myWarningId polygon{fill: inherit;}
        </style>
        <linearGradient id="half" x2="0%" y2="100%">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="red" />
            <stop offset="50%" stop-color="blue" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
        <g>
            <polygon points="13.9,0 0,24 27.8,24"></polygon>
            <g>
                <path d="m13.9,16.1l0,0c-1.1,0 -2.1,-0.9 -2.1,-2.1l0,-4.9c0,-1.1 0.9,-2.1 2.1,-2.1l0,0c1.1,0 2.1,0.9 2.1,2.1l0,4.9c-0.1,1.2 -1,2.1 -2.1,2.1z" class="st1"></path>
                <circle r="1.7" cy="19.5" cx="13.9" class="st1"></circle>
            </g>
        </g>
    </symbol>
</defs>
<g class="layer">
    <!-- this use will be generated multiple times -->
    <use x="0" y="0" fill="url(#half)"  transform="matrix(0.20000000298023224,0,0,0.20000000298023224,0,0) " xlink:href="#warning" id="svg_2"></use>
</g>

现在，如果要更改行的位置，则需要在<def>标记中进行。但这改变了我所有的<use>元素。

如何动态且单独地更改每个<use>的填充百分比？

我不认为为每个precent定义100 <linearGradient>个定义并更改fillUrl并不是一个好习惯...

Answer 1

如果要更改止损百分比，则不应在符号中放置渐变。如果您对步长满意（10％，20％，30％），则可以为每个步长实现一个渐变。看起来像这样：

<svg version="1.1" id="myWarningId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 27.8 24" style="enable-background:new 0 0 27.8 24;" xml:space="preserve">
<defs>
    <linearGradient id="_10" x2="0%" y2="100%">
        <stop offset="10%" stop-color="red" />
        <stop offset="10%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="_20" x2="0%" y2="100%">
        <stop offset="20%" stop-color="red" />
        <stop offset="20%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="_30" x2="0%" y2="100%">
        <stop offset="30%" stop-color="red" />
        <stop offset="30%" stop-color="blue" />
    </linearGradient>
    <symbol viewBox="0 0 27.8 24" y="0px" x="0px" id="warning" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css">
            #myWarningId .st1{fill:#FFFFFF;}
            #myWarningId polygon{fill: inherit;}
        </style>
        <g>
            <polygon points="13.9,0 0,24 27.8,24"></polygon>
            <g>
                <path d="m13.9,16.1l0,0c-1.1,0 -2.1,-0.9 -2.1,-2.1l0,-4.9c0,-1.1 0.9,-2.1 2.1,-2.1l0,0c1.1,0 2.1,0.9 2.1,2.1l0,4.9c-0.1,1.2 -1,2.1 -2.1,2.1z" class="st1"></path>
                <circle r="1.7" cy="19.5" cx="13.9" class="st1"></circle>
            </g>
        </g>
    </symbol>
</defs>

<g class="layer">
    <!-- this use will be generated multiple times -->
    <use x="0" y="0" fill="url(#_10)" transform="matrix(0.20000000298023224,0,0,0.20000000298023224,0,0) " xlink:href="#warning" id="svg_1"></use>
    <use x="0" y="32" fill="url(#_20)" transform="matrix(0.20000000298023224,0,0,0.20000000298023224,0,0) " xlink:href="#warning" id="svg_2"></use>
    <use x="0" y="64" fill="url(#_30)" transform="matrix(0.20000000298023224,0,0,0.20000000298023224,0,0) " xlink:href="#warning" id="svg_3"></use>
</g>
</svg>

SVG样式<use>（用linearGradient填充内容的x％）

1 个答案: