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

标签 css html node.js svg

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 9 年前

我想做的是 <img src="some.svg"> ,因为内联 svg 在 html 中真的很痛苦,它可以并行下载,但使用 CSS 编辑类似 fill:#fff 的东西.

PS.: 网页将在 nodeJS 服务器上,页面本身基本上是静态的。 (通过 Ajax 修改)

最佳答案

我假设您正在尝试使用 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

关于css - <img src ="*.svg"> 内联 SVG 以进行 CSS 编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23035617/

上一篇:html - 对齐元素 CSS

下一篇:html - 当前 HTML/XHTML/CSS W3C 推荐的版本是什么?

相关文章:

html - CSS 边框 : difference in Firefox/Chrome

html - 在 div 上使用 `display:table-cell` 有缺点吗?

Mysql 的每一行与其他表中的数据一起获取

html - 为什么分页显示在 Firefox 的主要部分之外?

html - 从 Html 页面中删除某些 CSS 样式

php - 计算两个日期之间的天数

node.js - 使用文件扩展名 e2e.js 进行排毒模拟

javascript - discord.js client.on (“error”)没有被调用

html - CSS:将div高度设置为容器的高度,但留10px空间

jquery - jQuery 如何检测表单是否为空白