Here I have this font color picker icon using a svg icon. When a specific color is selected, I want to change the bottom rectangle (not the A letter) to match the selected color, so I am wondering if there is a way to only render the bottom part of the svg icon with specific color?
Below is the SVG code:
<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6zM2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path></svg>Is it possible to change some numbers in the svg path or add a specific fill-rule so that only the bottom part could be filled with color, or, is there another way to do that with only CSS change?
Below is how it looks like with the outer HTML document. I am only given the option to modify the css styles on the i (icon) element.
<i data-icon-name="TextColorFilled" aria-hidden="true" class="Button-icon icon-518"><span role="presentation" aria-hidden="true" class="svgIcon---root---V-j2a" style="vertical-align: top; height: 100%; width: 100%;">
<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6zM2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path>
</svg>
</span>
</i>CodePudding user response：
If you split the svg into two paths you can select the second one and color just that using fill and CSS.
<style>
path:nth-child(2) {
fill: red;
}
</style>
<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6z"></path>
<path d="M2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path></svg>