1

I have a SVG that looks like:

<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>

There are three classes in here background trim and foreground that I would like to edit reactively in a VueJS component.

I also have 50 of these SVG's that I would like to switch in and out as well, preferably using some sort of reactive shirtId property.

But I can't figure out how to do that.

I can't embed it like this:

<img src="1.svg" />

Because then I can't edit the three classes.

It seems like I need to embed it directly into the component so I got as far as this:

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

Where i'm defining the colours in the <style> section at the end:

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

But this isn't reactive.

So then I tried this:

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

Now the background colour can be set reactively using the backgroundStyle property.

But this method would mean creating 50 different components containing each SVG edited with this inline style tag.

I had a look at this SVG Loader: https://github.com/visualfanatic/vue-svg-loader But I couldn't see how it would help in my case with the changing of the css properties.

Preferably what I would like to be able to do would be something like:

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

And then a MyCustomSvg that loads 17.svg and changes the fill on the three classes.

But I don't know if that's possible or how to get from where I am now to that point.

John Mellor
  • 2,351
  • 8
  • 45
  • 79
  • You could define your as a Vue component, then you would have all the benefits from Vue but you'd have to transform it. You could then also use your desired syntax. – ssc-hrep3 Jul 30 '19 at 19:35
  • You could also use the loader you mentioned. This will import the fully into the DOM. In the parent component, you would define the styles. Be aware that if you use scoped styles, you'll probably need the [`/deep/`](https://stackoverflow.com/a/52378590/3233827) selector to target those elements. – ssc-hrep3 Jul 30 '19 at 19:43

1 Answers1

1

Seems like CSS custom properties could help.

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

Then you can change custom property depending on props.

<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
      }
    }
  }
})

Check out this pen.

Andrew Vasylchuk
  • 4,671
  • 2
  • 12
  • 30