SVG CSS转换不工作于‘CSS’元素(Chrome)

Question

我无法通过CSS转换来处理SVG中的use元素。

它在最初的SVG上工作，但当我使用use时就不行了。见下文。

这似乎是特定于Chrome的(这两个例子都适用于FF)。

​

.stretched-rect {
  width: 50px;
  height: 50px;
}
.stretched-rect svg {
  width: 100%;
  height: 100%;
}

.stretched-rect {
  --fill-color: red;
}
.stretched-rect:hover {
  --fill-color: blue;
}

  Example with original svg (this works):
  <div class="stretched-rect">
    <svg viewbox="0 0 100 100" preserveAspectRatio="none">
      <rect width="100" height="100" rx="15" style="fill: var(--fill-color); transition: 1s fill;"/>
    </svg>
  </div>
  
  <br><br>
  <!-- Define SVG, so we can use it with `use` -->
  <svg style="display: none;">
    <symbol id="svg-rect" viewbox="0 0 100 100" preserveAspectRatio="none">
      <rect width="100" height="100" rx="15" style="fill: var(--fill-color); transition: 1s fill;"/>
    </symbol>
  </svg>
  
  Example using "use" (this does not work):
  <div class="stretched-rect">
    <svg><use xlink:href="#svg-rect"/></svg>
  </div>

​

Answer 1

正如其他人所指出的，似乎是Chrome中的一个bug。有关解决办法，请参阅下文。

正如我所评论的:您可以将样式应用于use元素，而不是在符号中设置rect样式:从符号的rect中删除样式并将其粘贴到use元素：

​

.stretched-rect {
  width: 50px;
  height: 50px;
}
.stretched-rect svg {
  width: 100%;
  height: 100%;
}

.stretched-rect {
  --fill-color: red;
}
.stretched-rect:hover {
  --fill-color: blue;
}

Example with original svg (this works):
  <div class="stretched-rect">
    <svg viewbox="0 0 100 100" preserveAspectRatio="none">
      <rect width="100" height="100" rx="15" style="fill: var(--fill-color); transition: 1s fill;"/>
    </svg>
  </div>
  
  <br><br>
  <!-- Define SVG, so we can use it with `use` -->
  <svg style="display: none;">
    <symbol id="svg-rect" viewbox="0 0 100 100" preserveAspectRatio="none">
      <rect width="100" height="100" rx="15" />
    </symbol>
  </svg>
  
  Example using "use" (this is working now):
  <div class="stretched-rect">
    <svg><use xlink:href="#svg-rect" style="fill: var(--fill-color); transition: 1s fill;"/></svg>
  </div>

​