One of the challenges I encountered was with an SVG star that I had defined externally and included within the DOM using use:
<svg>
<defs>
<symbol id="Star" viewBox="0 0 256 244">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</symbol>
</defs>
</svg>
<svg class="icon star" viewBox="0 0 256 244">
<title>Add Favorite</title>
<use xlink:href="#Star"></use>
</svg>
To make the star appear to be filling in from the outside, I worked on adding a transition for stroke-width and clipping the SVG with the same path:
*HTML*
<svg class="icon star" viewBox="0 0 256 244">
<defs>
<clipPath id="clip" viewBox="0 0 256 244">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</clipPath>
</defs>
<title>Add Favorite</title>
<use xlink:href="#Star" clip-path="url(#clip)"></use>
</svg>
*CSS*
.icon {
margin: 50px;
width: 50px;
height: 50px;
}
.star {
fill: #0F0;
stroke: #F00;
stroke-width: 1px;
transition: stroke-width 200ms linear;
}
.star:hover {
stroke-width: 50%;
}
The implementation was successful and here is a working fiddle
However, when I tried moving the clipPath definition up to the top...
<svg style="display: none;">
<defs>
<clipPath id="clip" viewBox="0 0 256 244">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</clipPath>
</defs>
<defs>
<symbol id="Star" viewBox="0 0 256 244" clip-path="url(#clip)">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</symbol>
</defs>
</svg>
<svg class="icon star" viewBox="0 0 256 244">
<title>Add Favorite</title>
<use xlink:href="#Star"></use>
</svg>
In this scenario, it didn't work anymore. Here is the not working fiddle.
I attempted including the clip-path="url(#clip)" within the use below but faced the same result. Similarly, when I added it within the CSS:
.star {
...
clip-path: url(#clip);
}
Hence, there is a difference between the two methods. If required, I will stick to the first method, although ideally, I prefer keeping the DOM clean with separate SVG definitions - or at least grouped together at the top.