【发布时间】：2014-12-11 00:43:35
【问题描述】：
所以我有一个精灵 SVG，其中有很多图标以网格状布局（每个都有自己的 30 x 30 块），直到现在我一直使用它作为背景图像，效果很好。
我最近发现您可以使用 CSS 类来更改 SVG 中包含的各个路径的填充颜色。这会很棒，因为我的精灵中有几个 V 形图标，我不得不多次复制和粘贴它们以获得不同颜色的 V 形。如果我可以只有一个 V 形并动态更改颜色，那就太好了。
我知道使用 background-image 方法无法做到这一点，并且 SVG 必须实际嵌入到页面中。
我很好奇最好的方法是什么，因为我的 sprite svg 中有很多图标，在页面上渲染这些图标感觉有点痛苦。
不管怎样，我试了一下。
对于这个例子，我的精灵是 60 x 30，所以上面有两个图标，我想要第二个，所以我的原点是 -30, 0。
<object type="image/svg+xml" data="sprite-icon-test.svg#House1" width="30" height="30">Your browser does not support SVG</object>
我看不到第二个图标，因为我无法指定偏移量。
我正在遵循此页面上显示的技术http://www.sitepoint.com/use-svg-image-sprites/，但他们将所有精灵放在彼此之上，这样可以正常工作，但我不想把它们都放在彼此之上，因为我有很多图标，这将是一场噩梦。
任何人都可以提供一种替代方法/方法，以便我仍然可以使用 CSS 将样式应用于路径，但保留我的网格格式。此外，每次我想使用图标时将整个 SVG 对象嵌入页面似乎有点疯狂，因为我有一个带有很多图标的大型精灵，我想这对性能来说会很糟糕，所以任何人都可以提供任何关于这是否可以避免？
更新：
这是我目前为止的目标。
<html>
<head>
<title>SVG Test</title>
<style>
.red {fill:#ec1937;}
</style>
</head>
<body>
<svg id="sprite" width="0" height="0">
<g id="chevron">
<path fill="#E8213B" d="M9.683,14.274c-0.378,0.399-0.378,1.053,0,1.452l5.932,6.264c0.378,0.399,1.006,0.408,1.395,0.019
l1.286-1.286c0.389-0.389,0.389-1.026,0-1.415L14.7,15.707c-0.389-0.389-0.388-1.026,0-1.415l3.598-3.598
c0.389-0.389,0.389-1.025,0-1.414L17.01,7.991c-0.389-0.389-1.016-0.38-1.395,0.019L9.683,14.274z"/>
</g>
<g id="house">
<polygon fill="#3E123E" points="44.753,10.503 37.378,17.878 37.378,25.253 52.128,25.253 52.128,17.878 "/>
<polygon fill="#3E123E" points="44.837,8.747 53.128,17.01 55.128,15.01 44.837,4.747 34.462,15.01 36.462,17.01 "/>
<polygon fill="#3E123E" points="52.128,10.018 52.128,5.33 48.878,5.33 48.878,6.777 "/>
</g>
</svg>
<svg width="30" height="30">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#house" class="red" x="-30" y="0"></use>
</svg>
</body>
遗憾的是，当您使用标签时，红色样式不适用。
我也尝试了 Erik 的建议，但页面上没有 SVG 代码，因此 CSS 选择器没有任何目标，因为标记仅引用外部 SVG 文件中的 a。
【问题讨论】：
-
您可以为此使用带有翻译转换的 SVG 片段标识符。见w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers
-
你真的在这里问了两个问题。您更改它以强调第二个问题的次数越多，埃里克的回答就越没有意义。
标签： css svg responsive-design vector-graphics