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 加载器：https://github.com/visualfanatic/vue-svg-loader 但我看不出它对改变 css 属性有什么帮助。

我希望能够做到的最好是：

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

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

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

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。