I'm creating an app with Fabricjs.
I have to add an SVG file to the canvas and change the color every time a Minicolors input changes.
I first made the browser display the SVG images as SVG codes like so:
$('img[src$=".svg"]').each(function(){
var $img = $(this),
imgURL = $img.attr('src'),
attributes = $img.prop('attributes');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Make sure that every attribute was copied
$.each(attributes, function() {
$svg.attr(this.name, this.value);
});
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
Then I loaded the SVG images from the DOM to the canvas when they get clicked on, like so:
$('#images').on('click', 'svg', function() {
var serializer = new XMLSerializer(),
svgStr = serializer.serializeToString(this);
fabric.loadSVGFromString(svgStr,function(objects, options) {
options.id = this.id;
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj);
obj.scaleToHeight(127) // Scales it down to some small size
.scaleToWidth(90)
.center() // Centers it (no s**t, Sherlock)
.setCoords();
canvas.setActiveObject(obj).renderAll();
});
});
Now for my next goal, how do I change the path color of the selected svg file? My main guess would be to follow these steps:
- Save the left and top positions of the selected SVG
- Change the color of the SVG image in the DOM
- Remove the selected SVG object
- Replace it with the new SVG using the new color at the saved left and top positions
But I thought: "So I have to do all this every time a Minicolors input changes? Won't that be a performance issue later?"
Is there a better approach than this? Here's a JSFiddle that will get you started. Thanks.