是否可以从外部 css 更改 svg（包含为 <img> 元素）样式？

Question

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

我需要的是：能够更改作为<img> 元素包含在页面中的svg 图像的样式（尤其是fill）。

示例 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）。