☰

使用 xlink 时控制 SVG 组件 css 属性？

tag-icon • tag-icon html css svg
使用 xlink 时控制 SVG 组件 css 属性？

我在 HTML 中内联添加了一个 SVG，如下所示：

<body>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256">
    <defs>
      <g id="my_element">
        <polygon points="10 4829 45 294"/>
        <polygon points="30 390 93 20"/>
      </g>
    </defs>
  </svg>
...

稍后在我的 html 中，我引用了 svg 元素，如下所示：

<svg viewBox="0 0 256 256" class="style1"><use xlink:href="#my_element"></use></svg>

这很完美。如果我的 svg 中有多个组，我可以通过引用它们的组 id ( #my_element) 将它们插入到 HTML 中。

另外，我可以动态地对每个 SVG 进行 CSS 更改，如下所示：

svg.style1 {
  fill: red;
}

但是，这就是我的问题所在。我似乎无法对 SVG 的各个组件进行 CSS 属性更改。这不起作用：

svg.style1 polygon {
  stroke: purple;
  fill: yellow;
}

我显然可以直接在 SVG 中进行这些更改，但我需要能够插入多个相同的 SVG#my_element并在单个级别上控制颜色。如果我在 SVG 本身上进行更改，那么无论我对 SVG 应用哪种样式，所有元素都会具有相同的颜色。所以我需要能够做这样的事情：

svg.style1 polygon {
  stroke: purple;
  fill: yellow;
}

svg.style2 polygon {
  stroke: red;
  fill: white;
}

可以这样做吗？使用语法时是否可以控制单个 SVG 组件的 CSS 属性use xlink:href？

答案1

<use>SVG 中的元素不支持class属性，请参阅https://stackoverflow.com/a/13674240/304371

简单分组可以解决这个问题：

<g id="wheel_front" class="spin">
   <use xlink:href="#wheelBase"  />
</g>

相关内容