SVG：覆盖填充

Question

我想在我的博客上放置一个 SVG 图形，可以通过 Wordpress 中的 CustomField 重新着色。

我在页脚中有以下 svg 代码：

<svg version="1.1" id="file-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="44.773px" viewBox="0 0 200 44.773" enable-background="new 0 0 200 44.773" xml:space="preserve">
    <g>
    <path fill="#5F626B" d="M191.297,40.525c13.789-2.825,10.018-29.098- 
    3.096-36.182C175.085-2.74,16.077,0.021,6.981,4.286C-2.114,8.552-2.53,33.385,6.958,40.762C16.445,48.142,185.49,43.669,191.297,40.525"/>
   </g>
 </svg>

我想通过以下标签使用 SVG:

<svg height="45px" width="200px">
    <use xlink:href="#file-button" />
</svg>

问题是，我无法在“svg”标签或“use”标签中要放置图形的位置设置“fill”参数。

您有什么技巧可以覆盖使用过的 svg 图形的填充吗？

Answer 1

您需要在 SVG 中的路径上设置填充语句

例如：

#file-button path {
    fill:green;
}

Answer 2

您需要使用路径（在本例中为 #test）作为 <use> 的参考。为了将它与不同的 fill 一起使用，请不要填写路径。在 <g> 元素上使用 fill ，就像我在以下示例中所做的那样。希望对你有帮助。

svg{border:1px solid}

<svg version="1.1" id="file-button"  width="200px" height="44.773px" viewBox="0 0 200 44.773" >
  <g fill="#5F626B">
    <path id="test" 
          d="M191.297,40.525
             c13.789-2.825,10.018-29.098-3.096-36.182
             C175.085-2.74,16.077,0.021,6.981,4.286
             C-2.114,8.552-2.53,33.385,6.958,40.762
             C16.445,48.142,185.49,43.669,191.297,40.525"/>
  </g>
   </svg>


<svg height="45px" width="200px">
    <use xlink:href="#test" fill="red" />
 </svg>

SVG：覆盖填充

SVG: Overwrite the filling

svg

fill