Question

在Chrome（非FF，Safari）中，我无法按类/ ID /元素引用设置外部链接（xlink：href）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 */

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

http://monopine.com/svg-demo/

Answer 1

CSS不适用于文件边界。因此，HTML中针对外部SVG中的元素的任何CSS都不起作用（或者至少不起作用）。因此，规则2和3（#my-icon和.fml）不起作用。

然而，<use>元素的内容可以从其引用者继承样式。所以他们应该继承.my-svg

的粉红色填充

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

1 个答案: