在 Chrome(不是 FF、Safari)中,我无法通过类/ID/元素引用来设置外部链接 (xlink:href) SVG 模板的子元素的样式。
我想知道我是否做错了什么?有没有其他人遇到过这个问题?
HTML:
<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></svg>
演示.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="my-icon" viewBox="0 0 21 21">
<title>Mobile Navigation Button</title>
<path class="fml" fill="#BADA55" d="M27.493…"/>
</symbol>
</svg>
CSS:
.my-svg { fill: pink; } /* will work */
#my-icon { fill: brown; } /* won’t work in Chrome */
.fml { fill: green; } /* won’t work in Chrome */
我在这里发布了一个更详细的演示:
最佳答案
CSS 不适用于跨文件边界。因此,HTML 中任何以外部 SVG 中的元素为目标的 CSS 都将不起作用(或者至少应该不起作用)。所以规则 2 和 3(#my-icon
和 .fml
)不应该起作用。
但是<use>
的内容元素可以从它们的引用者那里继承样式。所以他们应该从 .my-svg
继承粉色填充
关于css - 通过 CSS 选择外部 SVG 模板的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28057093/