Colored SVG

by franknstayn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');

const site_url = 'https://s3.eu-central-1.amazonaws.com/balibart-s3/SVGMockups/59f32980b5d8493ef7f298f0/front/Layer.svg?v=${Math.random().toString(36).substring(7)}'

console.log(site_url)
fabric.loadSVGFromURL(
  site_url,
  (objects, options) => {
    const loadedBackObjects = fabric.util.groupSVGElements(objects.filter(o => o.id.split(' ').includes('back')), options)
    console.log(loadedBackObjects);
    loadedBackObjects.set({
      left:0,top:0
    })
    loadedBackObjects.scaleToWidth(canvas.getWidth());
    const loadedFrontObjects = fabric.util.groupSVGElements(objects.filter(o => o.id.split(' ').includes('front')), options)
    console.log(loadedFrontObjects);
    loadedFrontObjects.set({
      left:0,top:0
    })
    loadedFrontObjects.scaleToWidth(canvas.getWidth());
    if (loadedBackObjects._objects) {
      loadedBackObjects._objects.filter(i => i.id.split(' ').includes('Heather')).map((i) => {
        i.set({
          //opacity: this.props.variation.heather ? 1 : 0
        })
      })
    }

    const colors = {
      st0: '#CC0000'
    }
    if (loadedBackObjects._objects) {
      Object.keys(colors).map((c) => {
        loadedBackObjects._objects.filter(i => i.id.split(' ').includes(c)).map((i) => {
          i.set({
            fill: colors[c]
          })
        })
      })
    } else if (loadedBackObjects) {
      Object.keys(colors).map((c) => {
        loadedBackObjects.set({
          fill: colors[c]
        })
      })
    }
    if (loadedFrontObjects && loadedFrontObjects._objects) {
      Object.keys(colors).map((c) => {
        loadedFrontObjects._objects.filter(i => i.id.split(' ').includes(c)).map((i) => {
          i.set({
            fill: colors[c]
          })
        })
      })
    } else if (loadedFrontObjects) {
      Object.keys(colors).map((c) => {
        loadedFrontObjects.set({
          fill: colors[c]
        })
      })
    }
    if (loadedFrontObjects._objects) {
     ...