Search code examples
svgfill

SVG: Overwrite the filling

I want to place a SVG graphic on my bog which can be re-colored via an CustomField in Wordpress.

  1. I have following svg code in footer of page:

    <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>

  2. I want to use the SVG by following tag:

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

Problem is, that I cannot set the "fill" parameter in the "svg" tag or in the "use" tag at the position where I want to place the graphic.

Do you have any tips how to overwrite the filling of the used svg graphic?

Solution

  • You need to use the path (#test in this case) as a reference for the <use>. In order to use it with a different fill, don't fill the path. Use the fill on the <g> element like I do in the following example. I hope it helps.

    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>