对 svg 进行描边，颜色填充只能是黑色，问题出在哪里？

引言

技术栈 vite-plugin-svg-icons + vue2
我在为某个 svg 图标描边（stroke）的时候，颜色始终是黑色(#000/black)

情景复现

我为 xxx.svg 文件的 path标签 添加一个 stroke='white'，
企图让这个区域添加一条白边：

<svg fill="none" xmlns="https://" viewBox="0 0 107 48" class="design-iconfont">
  <path fill-rule="evenodd" clip-rule="evenodd" d="xxxx" fill="none" stroke="white" stroke-width="1"/>
</svg>

结果是

我的"边"变成了黑色，我翻了它的父级，并没有发现有样式继承。
也尝试了 #fff、#ffffff、red 方式，黑色"坚不可摧"...

相关文章

GitHub - vbenjs/vite-plugin-svg-icons: Vite Plugin for fast creating SVG sprites.

引入的svg的stroke的颜色被父元素的color覆盖 · Issue #66 · vbenjs/vite-plugin-svg-icons · GitHub

Optionally replace stroke color by digitalacorn · Pull Request #68 · vbenjs/vite-plugin-svg-icons · GitHub

1. 其中第1个issue，最重要的记录是：有个人提交pr有一行代码，也就是下边这一行的问题了🔽

1. 第二个issue，有人提交了修改，但目前貌似这个还在流程中
   他/她做了一个开关，配置上之后可以关闭这行代码的配置。

1. 还有个说法，说某国国旗等等的原因，这里就不多赘述：大致就是这是一个不可能修复的问题。

解决方案

1. 注释 content 这行代码 或者 写开关绕过

/node_modules/vite-plugin-svg-icons/dist/index.cjs 里面找到并注释

2. 使用渐变的方式绕过bug

<svg fill="none" xmlns="https://" viewBox="0 0 107 48" class="design-iconfont">
  <linearGradient id="strokeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" /> // 颜色保持一致
    <stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:1" /> // 颜色保持一致
  </linearGradient>
  <path fill-rule="evenodd" clip-rule="evenodd" d="xxxx" fill="none" stroke="url(#strokeGradient)" stroke-width="1"/>
</svg>

突发奇想使用渐变的写法绕过 replace，尝试之后是可以实现“描边”效果的

后续

民间也有许多 fork 之后魔改的库，如果自己需要也可以进行更新
我在svg身上尝试了很久的 api ，没想到被偷家了!