我刚开始在网页中尝试使用 SVG,我发现只能使用<object />
标签将 SVG 图像添加到 HTML 中,这<img />
与我预期的不同。大多数时候,我通过 CSS 向网页添加图形,因为它们是网站展示的一部分,而不是内容。
我知道可以将 CSS应用于SVG,但是否可以使用纯 CSS 将矢量图像添加到 HTML 元素?
我刚开始在网页中尝试使用 SVG,我发现只能使用<object />
标签将 SVG 图像添加到 HTML 中,这<img />
与我预期的不同。大多数时候,我通过 CSS 向网页添加图形,因为它们是网站展示的一部分,而不是内容。
我知道可以将 CSS应用于SVG,但是否可以使用纯 CSS 将矢量图像添加到 HTML 元素?
<img>
自 Opera 9 以来,CSS(列表图像、背景图像、内容)中和 CSS 中都支持SVG。Opera 10 更好。Webkit/Safari 也支持 svg <img>
。
这里有一些例子,还有一些例子在dev.opera.com和annevankesteren.nl
如果您正在寻找内联 svg 示例,请查看Sam Ruby 的网站。
您可以尝试使用 content 属性引用 SVG 文件,但我认为它不受支持。如果它受到支持,它将如下所示:
.putapicturehere:before {
content: url(mysvgfile.svg);
}
这绝对不能在 IE 中工作——它可能在最新的 Firefox 中工作。
对于 CSS 浏览器支持问题,我总是参考 quirksmode.org 。
您可能需要编写一些 CSS-helper JavaScript 来从屏幕外的 img 中读取图像并将其放入您的对象标签中。这样您仍然可以使用 CSS 进行控制。
据我所知,Opera 9 和 WebKit(== Safari 和 Chrome)在 PC 上可以做到这一点,而且有传言说 FF3.5 也可以。
实际上,自从苹果在半年前就为 iPhone 的 Safari 添加了 SVG 支持以来,我不确定它是否有效,但值得一试。
干杯,
上次我尝试,差不多一年前,它没有工作。但是,您可以混合使用 svg 和 xhtml 标记。唯一的问题是页面必须具有正确的 mime 类型(application-xml 或类似的东西),否则浏览器将忽略 svg。
如果您想要严格分离内容和表示,内联 svg 并不是一个完美的解决方案,但它似乎是最受支持的使用 svg 的方式。