VueJS:使用反应式变量修改SVG填充样式

Question

我有一个SVG，看起来像这样：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 121">
  <defs>
    <style>
      .cls-1{fill:#fff}.background{fill:#f00}.trim{fill:#0f0}.foreground{fill:#00f}
    </style>
    <mask id="mask" x="4" y="4" width="111" height="113" maskUnits="userSpaceOnUse">
      <g id="mask-2">
        <path id="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/>
      </g>
    </mask>
    <mask id="mask-2-2" x="5" y="4" width="110" height="113" maskUnits="userSpaceOnUse">
      <g id="mask-2-3" data-name="mask-2">
        <path id="path-1-2" data-name="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/>
      </g>
    </mask>
    <mask id="mask-3" x="3" y="4" width="111" height="113" maskUnits="userSpaceOnUse">
      <g id="mask-2-4" data-name="mask-2">
        <path id="path-1-3" data-name="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/>
      </g>
    </mask>
    <mask id="mask-4" x="5" y="4" width="113" height="113" maskUnits="userSpaceOnUse">
      <g id="mask-2-5" data-name="mask-2">
        <path id="path-1-4" data-name="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/>
      </g>
    </mask>
  </defs>
  <g id="Page-1">
    <path class="background" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z" id="Path-3"/>
    <g mask="url(#mask)">
      <path id="Path-7" class="trim" d="M28 54l-5-44L4 50l22 17 2-13z"/>
    </g>
    <g mask="url(#mask-2-2)">
      <path id="Path-7-Copy" class="trim" d="M91 54l5-44 19 39-23 18-1-13z"/>
    </g>
    <g mask="url(#mask-3)">
      <path id="Path-6" class="foreground" d="M6 46a68 68 0 0 0 21 12q2 2-1 3l-15-4-8-10z"/>
    </g>
    <g mask="url(#mask-4)">
      <path id="Path-6-Copy" class="foreground" d="M114 46a65 65 0 0 1-20 12q-2 1 1 3l22-11v-3z"/>
    </g>
    <path id="Path-4" class="foreground" d="M47 3h26l2 2a99 99 0 0 1-16 1 77 77 0 0 1-14-1z"/>
    <g id="Shirt-Collar">
      <path class="foreground" d="M60 3h13l2 1s1 4-7 7a36 36 0 0 1-8 2 36 36 0 0 1-8-2c-8-3-7-7-7-7l2-1z"/>
      <path id="Combined-Shape" class="background" d="M59 10c-11 0-10-6-10-6h23s1 6-11 6h-2z"/>
    </g>
  </g>
</svg>

这里有三个类，background、trim和foreground，我想在VueJS组件中对它们进行反应编辑。

我还有50个这样的SVG，我也想切换进去和换出，最好是使用某种反应式shirtId属性。

但我想不出该怎么做。

我不能像这样嵌入它：

<img src="1.svg" />

因为那样我就不能编辑这三个类。

似乎我需要将它直接嵌入到组件中，所以我做到了这一点：

https://codesandbox.io/s/vue-template-d2yi7

我在结尾处的<style>部分定义颜色：

<style>
    .cls-1{fill:#fff}
    .background{fill:#f00}
    .foreground{fill:#00f}
    .trim{fill:#0f0}
</style>

但这不是反应性的。

所以我试了一下：

https://codesandbox.io/s/vue-template-ddj72

现在可以使用backgroundStyle属性来动态设置背景色了。

但是这种方法意味着要创建50个不同的组件，其中包含使用内联样式标记编辑的每个SVG。

我看过这个SVG Loader：https://github.com/visualfanatic/vue-svg-loader，但我看不出它对我更改css属性有什么帮助。

我希望能做的事情最好是：

<my-custom-svg foreground="green" background="red" trim="blue" id="17"></my-custom-svg>

然后是加载17.svg并更改这三个类的填充的MyCustomSvg。

但我不知道这是否可能，也不知道如何才能从我现在的位置走到那一步。

Answer 1

看起来CSS custom properties能帮上忙。

<style>
    .background { fill: var(--background); }
    .foreground { fill: var(--foreground); }
    .trim { fill: var(--trim); }
</style>

然后，您可以根据道具更改自定义属性。

<template>
  <div :style="cssProps">
    <--! Your SVG here -->
  /div>
</template>

new Vue({
  el: '#app',
  pops: ['background', 'foreground', 'trim'],
  computed: {
    cssProps() {
      return {
        '--background': this.background,
        '--foreground': this.foreground,
        '--trim': this.trim
      }
    }
  }
})

看看这个pen。