я не могу изменить цвет заливки в SVG Sprite

Question

У меня есть эта pen, где я сделал пример техники SVG спрайтов:

<svg xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">  
    <symbol viewBox="0 0 64 64" id="circle"> 
     <title>circle</title> 
      <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/> 
    </symbol> 
    <symbol viewBox="0 0 56.983 64.804" id="polyline"> 
     <title>polyline</title> 
      <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/> 
    </symbol> 
</svg> 

<svg class="circle"> 
    <use xlink:href="#circle"></use> 
</svg> 

<svg class="polyline"> 
    <use xlink:href="#polyline"></use> 
</svg> 

И я хочу, чтобы применить это с помощью CSS:

.circle { 
    fill: #f00; 
} 
.polyline { 
    fill: #00f; 
} 

Моя проблема заключается в том, что я не могу изменить цвет заливки элементов, добавленных в спрайт. Я искал информацию о том, как это сделать правильно, и я думаю, что мой подход правильный, но кажется, что это не так.

В этом другом pen, писал так же, как я думаю, работает нормально. Что я делаю не так?

Извините за мой английский, если я допустил какую-либо ошибку, это не мой родной язык.

Answer 1

Вам необходимо удалить внутренний стиль заливки и применить свойство css. В любом случае измените свойство fill svg, используя javascript DOM.

Answer 2

Вот рабочий пример: http://codepen.io/anon/pen/NqmrOR

Проблема заключалась в том, что fill="#1D1D1B" атрибуты размещаются непосредственно на элементах SVG.

ПРИМЕЧАНИЕ: Использование селекторов классов CSS в элементах SVG, поддерживаемых в большинстве современных браузеров, не поддерживается повсеместно. Программно применять стили к элементам SVG в самих JS фактически лучше.