html - 是否可以从外部 css 更改 svg(作为 元素包含)样式？

Question

我能找到的所有解决方案都描述了替换 <img> 的肮脏黑客行为带有内联 svg 的元素，或将 css 直接嵌入到 svg 中。两者都不适合我。

我需要的是:能够将包含在页面中的 svg 图像的样式(特别是 fill)更改为 <img>元素。

示例 html:

<img src="https://dl.dropboxusercontent.com/u/4486681/rect.svg" class="recolor-me" />

我希望 CSS 可以工作，但它没有

.recolor-me {
    fill: red;
}

要玩的沙盒:http://jsfiddle.net/Q4Y6k/

那么，有没有办法按照上面的要求重新给 svg 上色(不使用 JS 或内联 svg)？

PS:如果解决方案只有 chrome 就好了

Answer 1

不，您不能在嵌入页面上使用 CSS 代码设置嵌入资源的样式，即使嵌入资源恰好是 XML 格式(或 HTML 格式——您甚至不能设置 HTML 文档的样式使用嵌入文档中的 CSS 代码嵌入 iframe。