Fabric.js: issues with color and width of svg files on canvas
I am using fabricJS in my project and I have a problem with changing the color and width of strokes. I have some SVG files in my page and after clicking the user can add this SVG to the canvas and change its properties. With padding, it works great, but with bump, I can't seem to do the same. This is the code to fill in and it works well:
function setImageColor(element)
{
var activeObject = canvas.getActiveObject(),
color = "#"+element.value;
console.log(color)
console.log(activeObject)
activeObject.set({fill : color});
canvas.renderAll();
}
jscolor.addEventListener('change', function()
{
setImageColor(this);
});
Here is the code to load SVG elements on the canvas:
shapes.forEach(function(e)
{
e.addEventListener("click", function()
{
var src = e.src;
fabric.loadSVGFromURL( src, function(objects, options)
{
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
obj.scaleToHeight(127)
.scaleToWidth(90)
.center()
.setCoords();
canvas.setActiveObject(obj).renderAll();
});
});
});
and here is the code for the stroke and it doesn't work:
function setStrokeColor(element)
{
color = "#"+element.value;
var obj = canvas.getActiveObject();
console.log(color)
console.log(activeObject)
activeObject.set({stroke : color, strokeWidth: 5});
canvas.renderAll();
}
var stroke = document.getElementById("stroke");
console.log(stroke)
stroke.addEventListener('change', function()
{
setStrokeColor(this);
});
+3
source to share
1 answer
This should do it (thanks for exporting the SVG Path):
Here's the FabricJS code:
fabric.loadSVGFromString('<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>generator ikon</title><path class="cls-1" d="M60,35A25,25,0,1,1,35,10,25,25,0,0,1,60,35Z"/></svg>', function(objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
shape.set({
left: 50,
top: 50,
scaleX: 3,
scaleY: 3
});
if (shape.paths) {
for (var i = 0; i < shape.paths.length; i++) {
shape.paths[i].set({
fill: 'red',
stroke: 'green',
strokeWidth: 5
});
}
}
object = shape;
canvas.add(shape);
canvas.renderAll();
});
var switchColors = true;
document.getElementsByTagName("button")[0].addEventListener('click', function() {
if (object.paths) {
for (var i = 0; i < object.paths.length; i++) {
object.paths[i].set({
fill: (switchColors ? 'green' : 'red'),
stroke: (switchColors ? 'red' : 'green'),
strokeWidth: (switchColors ? 10 : 5)
});
}
}
switchColors = !switchColors;
canvas.renderAll();
});
Here's all the important JSFiddle, https://jsfiddle.net/rekrah/wg2qxc8e/ .
Let me know if you have any questions. Hope this helps!
+1
source to share