Question

我最近完成了一个网站，它在Firefox中运行良好。但是，我的网站上的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>

这是“进度条”的样式。环绕图标。

.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不接受外部＆＃39; SKlevel＆＃39;像Firefox这样的类，我似乎无法弄清楚如何在阴影根中设置任何样式。它也不适用于其他类或ID。

Answer 1

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

...阴影树中的元素从其主机'use'元素继承样式，但外部文档中定义的...样式规则与阴影树中的元素不匹配。

这不应该有效。

符合标准的版本应该将样式表与.SKlevel选择器作为skills.svg文件的一部分。不幸的是，样式表似乎不适用于外部重用元素。同样，规范没有实现 - 在这种情况下，Firefox和Chrome都是如此。如果样式直接在<circle>元素上声明为样式属性，我只能使用它。如果每个图标显示相同的＆＃34;进度＆＃34;戒指，你可以避免为他们每个人重复这样：

<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，因此它对任何其他元素都没有影响：< / p>

<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阴影根的样式？

1 个答案: