0

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

到目前为止我得到的是：

<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>动态和单独更改每个填充的百分比？

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

4

1 回答 1

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>
于 2018-10-15T07:34:43.610 回答