SVG: перезаписать начинки

Question

В настоящее время я хочу разместить SVG-графику на своем болоте, которую можно перекрасить с помощью CustomField в Wordpress.

1. У меня следующий 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>

2. Я хочу использовать SVG, следуя тегу

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

Проблема в том, что я не могу установить параметр "fill" в теге "svg" или в теге "use" в той позиции, где я хочу разместить изображение.

У вас есть какие-нибудь советы, как перезаписать заполнение использованного SVG-графика?!

Thx Toni

Answer 1

Вам необходимо использовать путь (в данном случае #test) как ссылку для <use>. Чтобы использовать его с другим fill, не заполняйте путь. Используйте fill для элемента <g>, как я делаю в следующем примере. Надеюсь, это поможет.

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>

Answer 2

вам нужно установить оператор заполнения для Path внутри SVG

например:

#file-button path {
    fill:green;
}