css - 使用 SVG 中的 CSS/js 填充所有颜色

Question

我正在尝试从链接到 HTML 文档内部的外部 svg 设置形状的填充颜色，因此我使用 CSS/JS 来设置样式。

我目前只能进行笔画工作，但填充似乎被覆盖了。任何帮助将不胜感激

<svg style="fill:green" viewBox="0 0 1000 1000">
<!--        <image id="one" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" x="54.5" y="338"/>-->
<use style="fill:orange" class="icon" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" transform="translate(50 50)"/>
<use style="fill:orange" class="icon" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" transform="translate(350 50)"/>
</svg>

<style>
/*
    #svg {
        fill: none;
    }
*/


    use.icon:hover {
        stroke: teal;
        width: 100px;
        fill: orange !imporant;
    }

</style>

Answer 1

当你打算使用<use>它只复制你的<circle> obj 正如您看到的代码片段一样，您可以设置 <circle> 的样式同时它会影响<use>

#circle:hover {
  fill: blue;
}

<svg viewBox="0 0 1000 1000">
  <circle id="circle" cx="150" cy="150" r="150"/>
  <use href="#circle" x="10"  fill="red" transform="translate(350 50)"/>
  <use href="#circle" x="10"  fill="yellow" transform="translate(700 50)"/>
</svg>

如果你想为 <use> 设置样式

/* #circle:hover {
  fill: blue;
} */

.new:hover {
  fill: green;
}

.new2:hover {
  fill: pink;
}

<svg viewBox="0 0 1000 1000" id="tr">
  <circle id="circle" cx="150" cy="150" r="150"/>
  <use href="#circle" x="10"  class="new"fill="red" transform="translate(350 50)"/>
  <use href="#circle" x="10"  class="new2" fill="yellow" transform="translate(700 50)"/>
</svg>