<img src="*.svg"> 内联 SVG 以进行 CSS 编辑 [关闭]答案

【问题标题】：<img src="*.svg"> to inline SVG for CSS editing [closed]<img src="*.svg"> 内联 SVG 以进行 CSS 编辑 [关闭]
【发布时间】：2014-04-13 07:51:42
【问题描述】：

我想做的是拥有<img src="some.svg">，因为在 html 中内联 svg 可能真的很痛苦，它可以并行下载，但使用 CSS 来编辑诸如fill:#fff.

PS.：网页将在 nodeJS 服务器上，页面本身基本上是静态的。（通过 Ajax 修改）

【问题讨论】：

没有看到任何问题。您可以在 img 标签中使用 SVG 图像。
但我以后不能用 CSS 设置它们的样式。

标签： css html node.js svg

【解决方案1】：

我假设您正在尝试使用 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 sn-ps 或类似的东西？

编辑：

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

【讨论】：

感谢您的回答，但这并不能解决问题。我想用 parent:hover 之类的东西。
您可以尝试在 Google 上搜索“Html5 Imports”，看看是否有一些解决方案。
更糟糕的是，img 元素无法加载在它加载的媒体中声明的其他外部资源（没有外部 <image>、<script> 或 <?xml-stylesheet>）