<img src="*.svg"/>内联SVG进行CSS编辑

时间:2014-04-12 20:16:02

标签: css html5 node.js svg

我想做的是拥有<img src="some.svg">,因为在html中内联svg可能非常痛苦,并且可以并行下载,但使用 CSS 进行编辑像fill:#fff这样的东西
PS。:网页将在nodeJS服务器上,页面本身基本上是静态的。 (通过Ajax修改)

1 个答案:

答案 0 :(得分:2)

我假设您正在尝试使用html文件或样式表中的css代码,并将它们应用于单独的svg文件中的元素,即设置填充或描边颜色。

似乎来自html文件的css规则(在脚本标记中或从链接的样式表中)不会影响svg元素(如果它们是通过图像标记包含的)。 我认为你可以在svg文件中使用外部样式表,从技术上讲你可以(https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes),但是当我用Chrome和Firefox尝试时,我得到的结果好坏参半。具体来说,如果我在浏览器中加载.svg文件(即将.svg文件的路径放在url栏中),外部样式表就可以工作了,但如果我通过img标签包含它,那么外部样式表没有效果。我不知道这是一个错误,一个功能,还是我在某个地方做错了什么。

也许我错过了一些东西,但根据我的尝试,如果嵌入了svg,你只能在svg之外可靠地使用css。也许你可以尝试将svg元素包含为html片段或类似内容?

编辑:

显然这是一个功能 - https://bugzilla.mozilla.org/show_bug.cgi?id=628747