SVG styling <use> (fill x% of the content with linearGradient) - svg

Question

I have an icon that I want to use many times on my page.
I want the icon to be filled dynamically (how much of it will be filled) from server data.
what I got so far is this:
<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>
Now, if I want to change where the line is I need to do it in the <def> tag. but this is changing all my <use> elements.
how can I change the % of the fill for each <use> dynamically and individually?
I don't think that making 100 <linearGradient> definitions for each precent and changing the fillUrl would be a good practice...

Answer 1

You should not put the gradient into the symbol if you want to change the percentage of the stop. If you are fine with steps (10%, 20%, 30%), you can implement one gradient for each step. It looks like this:
<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>