0
在Chrome(不是FF,Safari)中,我无法通过class/ID /元素引用来设置外部链接(xlink:href)SVG模板的子元素的样式。通过CSS选择外部SVG模板的子元素
我想知道我是否做错了什么?有其他人遇到过这个问题吗?
HTML:
<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></svg>
demo.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 */
我在这里发表更详细的演示:
请重新格式化您的问题,以便文本看起来像您的实际代码。如果您需要帮助格式化文本,请在编辑时单击文本框旁边的“帮助”链接。 – dg99 2015-01-20 23:29:19
@ dg99正确,谢谢! – monopineu 2015-01-20 23:31:52
那么你的问题是什么? – 2015-01-21 09:11:10