为什么我的Svg精灵的一部分只显示背景？

Question

我原来的照片是一幅淡灰色的，里面有一个'>‘符号’.但是当我在https://svgsprit.es/网站上把它转换成sprite时。它变成了一个满是黑色的圆圈，我在堆叠溢出的地方搜索了这个，但还没有类似的答案。

原始svg：

​

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <defs>
    <style>.cls-1{fill:#393939;}.cls-2{fill:#fff;}</style>
  </defs>
  <circle class="cls-1" cx="25.5" cy="25.5" r="25.5"/>
  <rect class="cls-2" x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"/>
  <rect class="cls-2" x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"/>
</svg>

​

精灵部分：

<symbol id="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <defs></defs>
  <circle cx="25.5" cy="25.5" r="25.5"></circle>
  <rect x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"></rect>
  <rect x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"></rect>
</symbol>

Answer 1

显然，svgsprit.es无法处理您定义的CSS样式。如果将样式属性用于SVG，效果会更好：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <circle fill="#393939" cx="25.5" cy="25.5" r="25.5"/>
  <rect fill="#fff" x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"/>
  <rect fill="#fff" x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"/>
</svg>

在以下方面的成果：

​

.icon {
  width: 50px;
  height: 50px;
  margin: .5em;
}

<svg width="0" height="0" class="hidden">
  <symbol id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
    <defs></defs>
    <circle fill="#393939" cx="25.5" cy="25.5" r="25.5"></circle>
    <rect fill="#fff" x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"></rect>
    <rect fill="#fff" x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"></rect>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#test"></use>
</svg>

​