Vue動態填滿顏色的SVG文件

Question

我正在使用 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 的顏色可編輯。但我找不到如何做到這一點。

Answer 1

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>

Answer 2

您可以從 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>