是否有可能从外部CSS更改svg（包含为< img>元素）样式？ [英] Is it possible to change svg (included as <img> element) styles from external css?

问题描述

我可以找到的所有解决方案都是用内联svg替换< img> 元素或将css直接嵌入到svg中。两者都不适合我。

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

示例html：

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

我预计可以使用CSS，但它不会。

  .recolor-me {
 fill：red; 
 
  

沙盒玩法： http://jsfiddle.net/Q4Y6k/

那么，有什么方法可以重新着色svg遵循上面的要求（不使用JS或内联svg）？

PS：如果解决方案只有chrome，那很好

资源的样式，即使嵌入资源恰好处于XML格式（或者HTML格式 - 你甚至不能使用嵌入文档中的CSS代码来嵌入嵌入有 iframe 的HTML文档）。

All the solutions I can find describe dirty hacks with replacing an <img> element with inline svg, or embedding css directly into the svg. Both doesn't suit me.

What I need: the ability to change styles (fill in particular) of the svg image included to the page as <img> element.

Example html:

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

CSS that I expected to work, but it doesn't

.recolor-me {
    fill: red;
}

Sandbox to play: http://jsfiddle.net/Q4Y6k/

So, is there any way to re-color the svg following the requirements from above (without using JS or inlining svg)?

PS: it's fine if the solution is chrome only

解决方案

No, you cannot style an embedded resource with CSS code on the embedding page, even if the embedded resouce happens to be in an XML format (or HTML format – you cannot even style an HTML document embedded with iframe using CSS code in the embedding document).

这篇关于是否有可能从外部CSS更改svg（包含为< img>元素）样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！