如何在 Chrome 中设置 SVG 阴影根的样式？

Question

我最近完成了一个网站，它在 Firefox 中运行非常好。 Chrome 但是我网站上的 SVG 元素有问题。

这就是我在网站上显示 SVG 的方式。使用 -use- 它基本上被视为内联 SVG，但它不会用矢量数据使我的 HTML 混乱，并且可以很好地存放在外部文件中。

<svg viewBox="0 0 120 120"><use xlink:href="img/skills.svg#De"></use></svg>

这是我的 SVG 文件中的图标之一。

<g id="De">
    <circle cx="60" cy="60" r="50" fill="none" stroke="#90938F" stroke-width="19"/>
    <circle class="SKlevel" cx="60" cy="60" r="50" fill="none"/>
    <path d="M60 10.2C38.4 10.2 20.1 23 13.1 43h93.9C99.9 23 81.6 10.2 60 10.2z"/>
    <path d="M10 59.8C10 66 11.1 72 13.2 77h93.6c2.1-5 3.2-11 3.2-17.2 0-6-1.1-11.8-3-16.8h-93.9C11.1 48 10 53.8 10 59.8z" fill="#FC0000"/>
    <path d="M60 109.4c21.4 0 39.7-13.4 46.8-32.4H13.2C20.3 96 38.6 109.4 60 109.4z" fill="#FC0"/>
  </g>

这是环绕图标的 'progress bars' 的样式。

.SKlevel
{
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    stroke: #2E8B57;
    stroke-width: 20px;
    stroke-dasharray: 316;
}

这是为了将进度设置到一个特定的水平，我已经从我的主要 CSS 外包出来以便于使用。

#De > .SKlevel
{
    stroke-dashoffset: 30;
}

这是我网站上图标的样子。

https://i.stack.imgur.com/Sq832.jpg

Chrome 不像 Firefox 那样接受外部 'SKlevel' class 的样式，我似乎无法弄清楚如何在影子根中设置任何样式。它也不适用于其他 classes 或 ID。

Answer 1

虽然我可以看到它在 Firefox 中有效，但它违反了 spec：

...elements in the shadow tree inherit styles from its host ‘use’ element, but...style rules defined in the outer document do not match the elements in the shadow tree.

这应该行不通。

符合标准的版本应将带有 .SKlevel 选择器的样式表作为 skills.svg 文件的一部分。不幸的是，样式表似乎不适用于外部重用的元素。同样，规范没有实现——在这种情况下，Firefox 和 Chrome 都没有实现。只有当样式直接在 <circle> 元素上作为样式属性声明时，我才能使用它。如果每个图标都显示相同的 "progress" 环，您可以避免像这样对每个图标重复：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <circle id="progress" cx="60" cy="60" r="50" fill="none"  transform="rotate(-90 60 60)"
            style="stroke:#2E8B57;stroke-width:20;stroke-dasharray:316;"/>
  </defs>
  <g id="De">
    <circle cx="60" cy="60" r="50" fill="none" stroke="#90938F" stroke-width="19"/>
    <use xlink:href="#progress" />
    <path d="M60 10.2C38.4 10.2 20.1 23 13.1 43h93.9C99.9 23 81.6 10.2 60 10.2z"/>
    <path d="M10 59.8C10 66 11.1 72 13.2 77h93.6c2.1-5 3.2-11 3.2-17.2 0-6-1.1-11.8-3-16.8h-93.9C11.1 48 10 53.8 10 59.8z" fill="#FC0000"/>
    <path d="M60 109.4c21.4 0 39.7-13.4 46.8-32.4H13.2C20.3 96 38.6 109.4 60 109.4z" fill="#FC0"/>
  </g>
</svg>

然后，您可以将 stroke-dashoffset 应用于 <use> 元素。它会被影子树中的每个元素继承，但是由于只有一个<circle>元素（在二级影子树中）有一个stroke-dasharray，它对任何其他元素没有影响：

<style>
.SKDe {
    stroke-dashoffset: 30;
}
</style>
<svg viewBox="0 0 120 120"><use class="SKDe" xlink:href="img/skills.svg#De"></use></svg>

如何在 Chrome 中设置 SVG 阴影根的样式？

How to style SVG shadow root in Chrome?

css

svg

shadow-dom