无需内联的 SVG 样式的最佳方式答案

【问题标题】：Best way to style SVG without having them inline无需内联的 SVG 样式的最佳方式
【发布时间】：2012-08-24 10:08:20
【问题描述】：

我有一个包含大约 10 个项目的菜单。每个项目都有自己的图标。这个图标是一个 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，维护起来并不容易。

我更愿意像使用 IMG (<img src="x.jpg"/>) 那样引用文件 src 并避免依赖 Javascript 的解决方案。

但是，我看到的所有方式都不允许 SVG 元素的 CSS 样式（或需要 JS）。

有什么想法/解决方法吗？

【问题讨论】：

你听说过 xml-stylesheet 吗？
选择器无法访问内部 DOM，这意味着您无法链接到外部 SVG 并让选择器找到该 SVG 中的任何元素。

标签： html css svg css-selectors

【解决方案1】：

可能不是最优雅的解决方案，但您可以将它们组织成 php 包括：

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

【讨论】：

【解决方案2】：

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

【讨论】：