Geek asks and answers

How can I fix the scaling and rotation of Inkscape SVG in FabricJS?

I'm having problems scaling and rotating SVG images using FabricJS.

I am working on an icon maker for my site. The user can add layers, select a shape for this layer, and then set a number of parameters, such as coloring and stroke width. I fill in the possible “shapes”, and for maximum flexibility in the complexity of the form, I use SVG files that I created using Inkscape. I am using a function loadSVGFromURLin FabricJS to handle uploading a file to my canvas.

The problem is that I load some (it seems, most) of these SVGs onto the canvas, and then try to use the handles to scale and rotate the image, the rendering of the result does not look as expected: Image and Octagon SVG action .

In this image, don’t worry about the “cut” edges, these are just the editor’s borders. After loading my octogon.svg onto the canvas, it looks right. When I spin, he messed up. I turned right and down, and the image moved left and up. Then, when I scale, it moves vertically in the opposite direction.

I tried to programmatically change these settings, and it behaves the same. I read several posted questions here and in newsgroups, but nothing gave me a solid solution.

One very close solution was to use an optimization tool to delete some conversion data that apparently didn’t really like the fabric (this tool is found here http://petercollingridge.appspot.com/ ). It seemed to work, but not for every image. In fact, regardless of the optimization options that I chose, the tool changed the octagon a lot, in fact it was not used as an octogon. This tool is also a reference in this existing question: 10470508 (problem with svg-display-rendering-in-fabric-js)

SVG Inkscape : Inkscape SVG, SVG SVG - . - , ( , , ).

GitHub Kangax , centeredRotation .

, Inkscape x, y 0,0 - , , , , , , , - . , flipY , . . , - . . , , , .

, Illustrator, , , , , "" . , , , , . Inkscape . Kangax , Inkscape SVG FabricJS, , . , .

GitHub, , , ; , , - , SVG .

2/21/2014 10:27 EST

SVG, , . , , "transform" , . , , , , . .

+3
3

, , . -, , , ; , SVG InkScape. SVG InkScape . , "", ; . , .

SVG SVG InkScape. SVG , ( - ).

EvilEye Games - InkScape SVG Transform Remover

, SVG . . , . , , - . , , .

0

fabricjs Inkscape, svg DOM , , : , . + , . ,

var bb=elem.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
//----rotate from center of elem---
elem.setAttribute("transform","rotate(angle "+cx+" "+cy+")") 
//---scale: translate center to(0,0)+scale+translate back---
elem.setAttribute("transform","translate("+cx+" "+cy+")scale(myScale)translate("+(-cx)+" "+(-cy+")")
0

svg xml XMLHttpRequest? xml, , SVG, . , . XMLdoc svg, . DIV html xml innerHTML. DOM.

var  XMLdoc
function loadSVGasXML()
{
    var SVGFile="my.svg"
    var loadXML = new XMLHttpRequest;
    function handler()
    {
        if(loadXML.readyState == 4 && loadXML.status == 200)
        {
                //---responseText---
                var xmlString=loadXML.responseText
                //---mySVGDiv.innerHTML=xmlString ---
                //---DOMParser---
                var parser = new DOMParser();
                XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
        }
    }
    if (loadXML != null)
    {
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}
0
source

More articles:


All Articles