更改不同背景上 svg 图标的笔画颜色

Question

我想根据背景将我的 svg 图标更改为不同的 colors 我正在使用具有以下代码的星形图标：

<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5344 5.82104L19.7321 12.087L26.6796 13.1919L21.7084 18.1694L22.8045 25.1183L16.5344 21.9286L10.2644 25.1183L11.3604 18.1694L6.38928 13.1919L13.3367 12.087L16.5344 5.82104Z" stroke="black" stroke-width="2"/>
</svg>

当它有白色背景时，它看起来像这样并且有黑色笔触，如下图所示：

当我将相同的星形 svg 图标添加到按钮组件时，它应该有白色笔划而不是黑色笔划，尝试过

 svg { fill: currentColor) // then it's invisible on white background, because of its whiteness.

如下所示，如何在没有黑色斯托克的情况下实现白星？

而不是有黑色斯托克斯的明星

Answer 1

您可以使用 colors 创建组件并传递道具：

 Vue.component('star', { template: ` <svg width="33" height="33" viewBox="0 0 33 33":fill="svgFill" xmlns="http://www.w3.org/2000/svg"> <path:stroke="svgStroke" d="M16.5344 5.82104L19.7321 12.087L26.6796 13.1919L21.7084 18.1694L22.8045 25.1183L16.5344 21.9286L10.2644 25.1183L11.3604 18.1694L6.38928 13.1919L13.3367 12.087L16.5344 5.82104Z" stroke-width="2"/> </svg>`, props: { svgStroke: {default: 'black'}, svgFill: {default: 'none'} } }) new Vue({ el: '#demo', })

 .btn { background-color: #2f76fd; color: white; display: flex; align-items: center; border: none; padding: .5em 1em; }.btn-text { margin-right: .5em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <star></star> <button class="btn"> <span class="btn-text">Primary</span> <star svg-stroke="white" svg-fill="white"></star> </button> </div>