使用 Fabric.js 访问 SVG 属性

Question

I'd like to load a SVG image into canvas using Fabric.js and have access to all attributes of it.

Let's assume I have an image like this: SVG Image

I tried to it using Fabric.js on 3 ways: 1. (Saved as String) - this method is not loading my image, I took other SVG and attributes can be accessed with svgImg.fill.color property.

fabric.loadSVGFromString(svg, function (objects, options) {
        var svgImg = fabric.util.groupSVGElements(objects, options);
        canvas.add(svgImg);
    });

2. Directly from URL:

fabric.loadSVGFromURL(URLsvg, function (objects, options) {
        var svgImg = fabric.util.groupSVGElements(objects, options);
        canvas.add(svgImg);
    });

3.Using fabric.Image:

<img id="Test_Img" src="~/SVG/homer-simpson.svg" style="display: none;"  />


var Img = document.getElementById('Test_Img');
    var imgInstance = new fabric.Image(Img, {
        left: 90,
        top: 80
    });

How can I access inner attributes of my SVG and change for example color of Homers T-Shirt?

Answer 1

Loaded SVG objects become groups in fabric.js (if they are not simple geometric forms like a rectangle, circle, etc.).

You can access the members of the group with getObjects(), which returns an array.

Here is a simple example. It reads an SVG consisting of 3 arcs and changes the color of the first arc to blue:

var canvas = new fabric.Canvas('canvas', { preserveObjectStacking: true });
canvas.backgroundColor="#fff";
canvas.renderAll();

fabric.loadSVGFromURL("https://media-public.canva.com/MABtmZU4zXQ/1/screen.svg",function(objects,options) {

    var loadedObjects = fabric.util.groupSVGElements(objects, options);

    loadedObjects.set({
            width: 300,
            height: 150
    });

    canvas.add(loadedObjects);

    // Change the first arc to blue
    loadedObjects.getObjects()[0].set({fill: "blue"});

    canvas.renderAll();

});

It runs with fabric.js Version 3.5. Working example: https://jsfiddle.net/awehring/k7azLb84/9/