在這里我有一個使用svg圖示的字體顏色選擇器圖示。當選擇一個特定的顏色時，我想改變底部的矩形（而不是A字母）以匹配所選擇的顏色，所以我想知道是否有辦法只用特定的顏色來渲染svg圖示的底部部分？
下面是SVG代碼：
。< svg class="svgIcon--svg--3eBcz" viewBox="0 0 16 16"/span> 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> 是否有可能改變svg路徑中的一些數字，或者添加一個特定的填充規則，以便只有底部的部分可以填充顏色，或者，是否有其他方法可以只通過改變CSS來實作？
下面是它在外部HTML檔案中的樣子。我只能選擇修改i（圖示）元素上的css樣式。
。< i data-icon-name="TextColorFilled"/span> aria- hidden="true" class="Button-icon icon-518"> < span role="presentation"/span> 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"/span> 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>/span>
</svg>
</span>/span>
</i>/span>uj5u.com熱心網友回復：
如果你把svg分成兩個路徑，你可以選擇第二個路徑，并使用填充和CSS為其著色。
。<style>/span>
path:nth-child(2) {
填充：紅色。
}
</style>>
< svg class="svgIcon--svg--3eBcz" viewBox="0 0 16 16"/span> 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>/span>
<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> 轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/320119.html
標籤：