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

Question

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

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

score 5 · Accepted Answer

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

这里有一些例子，还有一些例子在dev.opera.com和annevankesteren.nl

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

score 4 · Accepted Answer

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

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

这绝对不能在 IE 中工作——它可能在最新的 Firefox 中工作。

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

score 1 · Accepted Answer

您可能需要编写一些 CSS-helper JavaScript 来从屏幕外的 img 中读取图像并将其放入您的对象标签中。这样您仍然可以使用 CSS 进行控制。

score 1 · Accepted Answer

据我所知，Opera 9 和 WebKit（== Safari 和 Chrome）在 PC 上可以做到这一点，而且有传言说 FF3.5 也可以。

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

干杯，

score 0 · Accepted Answer

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

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

5 回答 5