使用 CSS 定位 SVG

Question

有没有办法让我使用 CSS 来定位 SVG？它们在 IE8 向下看起来像破碎的图像，我想使用modernizr 来隐藏它们，例如我希望有类似的东西......

.no-svg object[type=svg] {
  display:none;
}

按照http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii 中的建议，我正在使用它来将 SVG 嵌入到我的页面中

<object type="image/svg+xml" 
  width="100" height="100" style="float:right" 
  data="http://blog.codedread.com/clipart/apple.svgz">
<span/></object>

Answer 1

标记中的type 属性是image/svg+xml。您的属性选择器object[type=svg] 会查找type 属性完全 svg，因此您的对象将不匹配。

您应该在标记中指定完整的 MIME 类型（您需要在此处使用引号，否则它将不起作用；有关详细信息，请参阅 this spec）：

.no-svg object[type="image/svg+xml"] {
  display:none;
}

或者，如果您愿意，可以使用子字符串属性选择器，但我更喜欢上面的：

.no-svg object[type*=svg] {
  display:none;
}