我正在使用 VueJS 3 制作一个 Twitter 克隆应用程序。
我将 Twitter 的徽标保存为 .svg 文件，并可以将其与 <img /> 标记一起使用。当我为 <svg> 标记提供 fill="#fff" 属性时，我还可以更改其颜色。但是，我想在多个位置并以不同的颜色使用此 .svg 文件。
因此，我尝试通过为 <img /> 标签提供类 fill-white、bg-white 和 text-white 来动态更改 svg 的颜色，但它不起作用。
我当前的 .svg 文件 - 白色
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
<g>
<path fill="#fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
</g>
</svg>
图片标签
<img src="/twitter-bird.svg" draggable="false" class="w-52 lg:w-96 fill-white" alt="Twitter Bird" />
我在 .svg 文件上尝试过此操作
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" aria-hidden="true">
<g>
<path fill="params(fill) #fff" d="M23.643 4.937c-... 1.7-1.477 2.323-2.41z"></path>
</g>
</svg>
我知道我需要使这个 svg 的颜色可编辑。但我找不到如何做到这一点。
您可以从 svg 文件制作组件并将填充绑定到 prop：
const app = Vue.createApp({ data() { return { colors: ['#8A2BE2', 'rgb(255,255,0)', '#008000'], }; }, }) app.component('myImg', { template: ` <svg height="40" viewBox="0 0 107.1 107.1" style="enable-background:new 0 0 107.1 107.1;" xml:space="preserve"> <path :fill="color" d="M2.287,47.815l23.096,19.578L18.2,96.831c-1.411,5.491,4.648,9.998,9.575,6.901L53.55,87.813l25.774,15.916 c4.79,2.955,10.844-1.408,9.576-6.902l-7.184-29.435l23.099-19.579c4.363-3.661,2.111-10.844-3.662-11.267l-30.282-2.255 L59.464,6.266c-2.112-5.211-9.577-5.211-11.832,0L36.225,34.292L5.944,36.547C0.174,37.113-2.081,44.154,2.287,47.815z"/> </svg> `, props: ['color'] }) app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div v-for="col in colors"> <my-img :color="col"></my-img> </div> </div>