html - 无需内联 SVG 样式的最佳方式

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>

问题是:

1. 内嵌大量 SVG 文件会使代码不可读，并且
2. 如果您在别处引用 SVG，则维护起来并不容易。

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

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

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

Answer 1

可能不是最优雅的解决方案，但您可以将它们组织到 php include 中:

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