通过CSS是否可以将SVG图像添加到网页中？

Question

4

我刚开始在网页中尝试使用SVG，并发现只能使用<object />标签将SVG图像添加到HTML中，而不是像我预期的那样使用<img />。大多数情况下，我通过CSS向网页添加图形，因为它们是站点演示的一部分，而不是内容。

我知道可以将CSS应用于SVG，但是否可能仅使用CSS将矢量图像添加到HTML元素中呢？

- Dan

5个回答

4

您可以尝试使用content属性引用SVG文件，但我认为这不受支持。如果支持的话，它将如下所示：

.putapicturehere:before {
  content: url(mysvgfile.svg);
}

这种方法在IE浏览器中肯定行不通 - 可能在最新的Firefox浏览器中可以使用。

对于CSS浏览器支持问题，我总是参考quirksmode.org网站。

- Neall

它在IE上无法工作并不重要。我的目标受众将是iPhone / iPod触摸Safari浏览器。 - Dan Herbert

如果在iPhone上可以运行，请告诉我们。SVG是一项很酷的技术 - 我希望它能更加流行！ - Neall

你能在这个解决方案中操作SVG属性，例如填充吗？ - Lajos Mészáros

1

据我所知，Opera 9和WebKit（即Safari和Chrome）在PC上可以实现，而传言称FF3.5也将能够实现。

实际上，自从苹果半年前将SVG支持添加到iPhone的Safari中以来，我不确定它是否有效，但值得一试。

干杯！

- Boldewyn

1

你可能需要编写一些CSS辅助JavaScript代码，从屏幕外的img标签中读取图像并将其放入object标签中。这样你仍然可以使用CSS进行控制。

- Lou Franco

0

上一次我尝试是大约一年前，它没有工作。但是，您已经可以混合svg和xhtml标记。唯一的问题是页面必须具有正确的mime类型（应用程序xml或类似类型），否则浏览器将忽略svg。

如果您想要内容和演示之间的严格分离，内联svg不是完美的解决方案，但似乎是使用svg的最受支持的方式。

- Bloodboiler

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Dahlström · Accepted Answer

自Opera 9以来，SVG在<img>和CSS（list-image、background-image、content）中得到支持。而Opera 10则更加完善。Webkit/Safari也支持在<img>标签中使用SVG。

这里有一些示例，还有一些在dev.opera.com和annevankesteren.nl网站上的例子。

如果你正在寻找内联SVG示例，请查看Sam Ruby的网站。