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

【问题标题】：Is it possible to add SVG images to a web page through CSS?是否可以通过 CSS 将 SVG 图像添加到网页？
【发布时间】：2010-09-16 12:01:43
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

干杯，

【讨论】：

【解决方案5】：

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

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

【讨论】：