Question

我有一个包含大约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，则无法轻松维护SVG。

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

然而，我所见过的所有方法都不允许SVG元素的CSS样式（或需要JS）。

有任何想法/解决方法吗？

Answer 1

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

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

Answer 2

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

在没有内联的情况下设置SVG样式的最佳方法

2 个答案: