Question

我有一个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%;
}

我一直在寻找几个小时，似乎找不到合适的方法......

Answer 1

您可以使用svg fragment identifiers来显示不同的区域，假设不同的<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 Stacks，它通过将所有绘图放在彼此之上，然后只显示你想要使用CSS看到的那个来工作。

在CSS中实现SVG图像文件的正确方法是什么？

1 个答案: