Ориентация SVG-значков из файла defs с CSS, не работающего в Webkit

Question

Я работаю над проектом, который использует некоторые значки SVG, которые я хотел бы иметь в стиле css для разных сценариев и состояний зависания, но то, что у меня есть просто не похоже на работу в Webkit, хотя он работает, как ожидалось в Firefox:

http://codepen.io/poopsplat/pen/ycaod

Я использую эти SVGs в том, что Крис Choyier прорисовывает в своей системе Icon с SVG спрайтов статьи, включает в себя файл defs на странице и затем размещает <svg> элементов на странице, содержащей ссылки <symbol> по id с использованием <use>. Я также использую Grunt-svgstore для автоматизации сборки файла SVG defs.

Пример Chris (http://codepen.io/chriscoyier/pen/EBHlD) отлично работает в Webkit, даже если вы начинаете вставлять значки в контейнеры и нацеливать их таким образом, так что это не проблема. В этом конкретном примере Chris использует <g> элементы и нацеливает их, тогда как автоматическая форма выходного файла Grunt-svgstore обертывает отдельные значки в <symbol> элементами с id s, на которые ссылаются в HTML, но я попытался форматировать мой файл SVG defs таким образом, чтобы если это была проблема, и это не так.

Я не понимаю, что отличает мой рабочий пример и что-то вроде примера Криса. У кого-нибудь есть идеи относительно того, почему таргетинг на эти значки SVG не работает в Webkit?

Answer 1

Ваши иконки SVG имеют атрибуты презентации (например, «fill», «stroke» ...), поэтому эти стили, определенные элементом CSS для использования, игнорируются.
Итак, вы должны удалить все атрибуты презентации.
сделана простой образец. http://jsfiddle.net/n3n2vLk8/

SVG (HTML)

<svg style="display:none"> 
    <defs> 
     <symbol id="withFill" viewBox="-5 -5 10 10"> 
      <circle r="5" fill="orange"/><!--You can't override this value--> 
     </symbol> 
     <symbol id="noFill" viewBox="-5 -5 10 10"> 
      <circle r="5"/> 
     </symbol> 
    </defs> 
</svg> 
<svg width="200px" height="100px"> 
    <use xlink:href="#withFill" width="100" height="100"/> 
    <use xlink:href="#noFill" x="100" width="100" height="100"/> 
</svg> 

CSS:

use{ 
    fill: red; 
}