Question

我的HTML中包含此SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128.00456 127.33362" width="0" height="0" position="absolute">
  <defs>
    <pattern id="e" xlink:href="#b" patternTransform="matrix(1.006 0 0 1 288.184 313.89)"/>
    <pattern id="b" xlink:href="#c" patternTransform="matrix(1.006 0 0 1 -.206 0)"/>
    <pattern id="c" width="119.183" height="42.49" patternUnits="userSpaceOnUse" patternTransform="translate(288.338 309.89)">
      <path fill="none" id="circle-top-fill" stroke="#000" stroke-width="3.971" stroke-miterlimit="1" d="M2.614 39.184A62.015 62.015 0 0 1 59.83 1.987a62.015 62.015 0 0 1 56.752 37.9" stroke-linecap="square" stroke-dasharray="0.99275, 0.99275"/>
    </pattern>
    <path fill="url(#e)" d="M288.39 313.89v40.173h119.693V313.89H288.39z" id="circle-top" transform="translate(-283.99 -313.89)" />
  </defs>
</svg>

然后我在

页面中使用它

<svg class="circle">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#circle-top"/>
</svg>

现在我需要为它添加不同的颜色（例如，将类.circle--blue添加到.circle）。

当我使用

时

.circle--blue use #circle-top-fill {
  stroke: blue;
}

它没有用。显然fill="url(#foo)"没有创建影子DOM。

有需要时可以访问#circle-top-fill吗？

TL; DR：我的HTML中有内联SVG定义。然后我想在页面上的不同颜色的几个地方使用它。

修改： jsfiddle example

使用CSS访问链接的SVG元素

0 个答案: