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

Question

我刚开始在网页上尝试使用SVG，我发现只能使用<object />标记将SVG图像添加到HTML中，而不是像我期望的那样<img />。大多数时候，我通过CSS向网页添加图形，因为它们是网站呈现的一部分，而不是内容。

我知道可以将CSS 应用于 SVG，但是可以使用纯CSS将矢量图像添加到HTML元素吗？

Answer 1

自从Opera 9以来，<img>和CSS（列表图像，背景图像，内容）支持SVG，Opera 10更好。 Webkit / Safari也支持<img>中的svg。

一些examples here，还有一些dev.opera.com和annevankesteren.nl

如果您正在寻找内联svg示例，请查看Sam Ruby's site。

Answer 2

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

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

这肯定不适用于IE - 它可能适用于最新的Firefox。

对于css浏览器支持问题，我总是reference quirksmode.org。

Answer 3

您可能需要制作一个CSS帮助程序JavaScript，以便从屏幕外的img中读取图像并将其放入对象标记中。这样你仍然可以用CSS控制。

Answer 4

据我所知，Opera 9和WebKit（== Safari＆amp; Chrome）在个人电脑上进行，有传言说FF3.5也可以。

实际上，由于苹果仅在半年前就向iPhone的Safari添加了SVG支持，我不确定它是否有效，但值得一试。

干杯，

Answer 5

上一次我尝试，差不多一年前，它没有用。但是，您可以混合使用svg和xhtml标记。唯一的问题是页面必须具有正确的mime类型（application-xml或类似的东西）或浏览器将忽略svg。

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