svg - 如何在 SVG 中继承描边颜色?(不是填充,而是描边颜色)
问题描述
我有一个 .SVG,我用 .SVG 调用<img src="/image/arrow.svg" alt="Arrow">
。一切都很好,但我想为我的 SVG 动态设置不同的笔触颜色(不是填充颜色...),例如<img ... style="color:red">
. 我读到我可以在我的路径上使用 fill="currentColor" ,但是我该如何处理我的笔触颜色呢?
我的 SVG 文件:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>
我的html:
<img src="/image/arrow.svg" alt="Arrow" style="color:red">
解决方案
正如Robert Lognson正确指出的,并且之前在 StackOverflow 上讨论过,用作图像元素的 svg 具有新的图像上下文,因此它不使用文档的样式,而内联 svg 元素确实使用它们。
所以下面的例子有效:
svg.red {
color: red;
}
<svg class="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>
推荐阅读
- angular - 将前端从 web 动态加载到 Angular:可能吗?
- python - 使用python进行多线程加密的问题
- r - 在R中的变量上选择具有特定值的每组的最后两行
- xslt - 问题:SVG
- angular - 当我使用方法填充行时,ag-grid Cell Renderer 停止工作
- sql-server - 数据库未更新
- javascript - 如何测试是否在componentDidMount内部调用了方法?
- python - ValueError:无法为具有形状“z”的张量“y”提供形状“x”的值
- javascript - 我的谷歌云功能存在承诺问题
- dynamic - 如何根据表单字段动态过滤 PXSelect 属性