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

Question

我的原始图片是浅灰色，带有'＆gt;其中的符号。但是，当我将其转换为网站上的SVG Sprite时， https://svgsprit.es/ 。它变成了一个完整的黑色圆圈。我已经在stackoverflow中搜索了此内容，但还没有类似的答案。

原始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>