使用svgsprit.es生成SVG精灵后图标仅显示全黑圆 箭头丢失

svgsprit.es 生成<symbol>节点时，会自动清空原SVG <defs> 标签内的<style>样式块，原图形元素通过class绑定的fill填充属性会全部丢失。
按照SVG默认渲染规则，没有显式声明fill属性的图形元素会默认填充为纯黑色，原本应为白色的右箭头符号和默认填充为黑色的圆形颜色完全一致，视觉上就呈现为纯黑色圆形，内部符号完全无法显示。

• 方案1：直接修改生成后的SVG精灵代码，给所有图形元素补全内联fill属性，无需依赖class样式即可正常渲染，修复后的代码片段如下：

<symbol id="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <circle cx="25.5" cy="25.5" r="25.5" fill="#393939"></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)" fill="#fff"></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)" fill="#fff"></rect>
</symbol>

• 方案2：后续使用该工具生成SVG精灵前，先把原始SVG文件里的class样式全部转换为元素内联的fill属性，删除<defs>标签内的<style>块后再上传生成，从源头避免样式被工具清空的问题。

注意：SVG精灵内的<symbol>节点本身不会继承外部页面定义的同名class样式，依赖class控制填充、描边等属性的写法本身就不兼容SVG精灵的常规使用场景，优先使用内联属性渲染稳定性更高。

内容的提问来源于stack exchange，提问作者emma