1

我有一个 SVG 文件，其中包含多个具有唯一 ID 的 SVG。

<g id="tags">
...
</g>
<g id="tags2">
...
</g>

到目前为止，我已经尝试实现这两种方式，但没有成功。我尝试将其设置为背景位置。

.icon {
  background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon.tags-icon {
  background-position: 0px 0px;
  width: 12px;
  height: 12px;
}

我尝试在最后附加 SVG 的 ID，这似乎也不起作用。

.icon.tags-icon {
  background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg#tags);
  background-repeat: no-repeat;
  background-size: 80%;
}

我一直在寻找几个小时，似乎无法找到正确的方法...

4

1 回答 1

4

假设不同的元素位于不同的位置，您可以使用svg 片段标识符来显示不同的区域，例如<g>

<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px;        height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>  
</body>
</html>

上面的例子展示了嵌入，但这个想法同样适用于背景图像。

另一种方法是SVG 堆栈，它的工作原理是将所有图形叠加在一起，然后使用 CSS 显示您想要查看的图形。

于 2013-02-02T21:21:46.173 回答