最好的方式样式SVG没有他们内联

我有一个约10项目的菜单。每个项目都有自己的图标。这个图标是一个SVG文件。最好的方式样式SVG没有他们内联

例如：

<li class="active"> 
    <a href="/home"> 
     <svg version="1.1" id="svg-menu-home" 
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" y="0px" width="31px" height="31px" viewBox="-8 -8 31 31" 
      overflow="visible" enable-background="new -8 -8 31 31" xml:space="preserve"> 
      <mask maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15" id="maskTop"> 
       <polygon fill="#FFFFFF" points="12,6.036 2,6.036 2,14.036 6,14.036 6,9.036 8,9.036 8,14.036 12,14.036"/> 
       <polygon fill="#FFFFFF" points="7,0.036 0,7.036 14,7.036"/> 
      </mask> 
      <rect mask="url(#maskTop)" fill="#939598" width="15" height="15"/> 
     </svg> 
     <span>Home</span> 
    </a> 
</li>

当用户与菜单项我可以分配一个类等，以它（悬停，选择，激活）相互作用。

具有整个源直列似乎是我可以使用CSS，如改变SVG的唯一途径：

<style> 
    li.active svg polygon { 
     fill: red; 
    } 
</style>

的问题是：

有SVG的任何显著文件数直列使代码无法读取，并且如果您在其他地方引用它，那么维护SVG并不容易。

我宁愿做参考文件SRC你的IMG（<img src="x.jpg"/>），并避免使用Javascript依赖的解决方案的方式。

但是我见过的所有方法都不允许使用SVG元素的CSS样式（或需要JS）。

任何想法/解决方法？

来源

2012-08-29 donohoe

选择器无法到达内部DOM，这意味着您无法链接到外部SVG并且有一个选择器在该SVG中查找任何元素。 – BoltClock

您是否听说过xml样式表？ – 2012-08-29 18:19:29

可能不是最完美的解决方案，但你可以将它们整理到PHP包括：

<?php include 'inc/svg-menu-home.svg.php'; ?>

来源

2012-08-29 18:25:46 piatek

我认为是不是一个坏的方式来看看在http://raphaeljs.com/。它帮助我创建这个http://screencast.com/t/rNr0Cbqkb（每个区域都是svg）

来源

2012-08-29 18:38:14 stefanz

最好的方式样式SVG没有他们内联

回答

相关问题