通过CSS选择外部SVG模板的子元素

在Chrome（不是FF，Safari）中，我无法按class/ID/element引用设置外部链接（xlink:href）SVG模板子元素的样式

我想知道我有没有做错什么？还有其他人遇到过这个问题吗

HTML:

我在这里发布了一个更详细的演示：

---

CSS不跨文件边界应用。因此，HTML中以外部SVG中的元素为目标的任何CSS都不起作用（或者至少不应该起作用）。所以规则2和3（

#我的图标

和

.fml

）不应该起作用

---

但是，

元素的内容可以从其引用器继承样式。因此，他们应该继承

中的粉红色填充。my svg

请重新格式化您的问题，使文本看起来像您的实际代码。编辑文本时，如果需要帮助格式化文本，请单击文本框旁边的“帮助”链接。@dg99已更正，谢谢！那么你的问题是什么？谢谢你的澄清。奇怪的是，FF和Safari支持以影子dom/外部作用域中的元素为目标的功能。

<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></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>

.my-svg { fill: pink; }     /* will work */
#my-icon { fill: brown; }   /* won’t work in Chrome */
.fml { fill: green; }       /* won’t work in Chrome */