2

我有一个大约 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>

问题是：

  1. 内联大量 SVG 文件会使代码不可读，并且
  2. 如果您在其他地方引用 SVG，维护它并不容易。

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

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

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

4

2 回答 2

0

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

<?php include 'inc/svg-menu-home.svg.php'; ?>
于 2012-08-29T18:25:46.617 回答
0

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

于 2012-08-29T18:38:14.523 回答