Geek asks and answers

Svg Text Element Vertical Text

I have a problem with svg text element. I want to rotate it along the y axis. To do this, I use the scale function (-1.1).

var t = getMatrix(element);
t.scale(-1,1);
element.transform(t);

but the element seems to be the same. Transformation does not work.

If I try to flip the horizontal axis, on a scale of (1, -1). he works

Please, what am I doing wrong?

+3
source share
2 answers

Thanks for the help. I forgot to say that I am using the Snap svg library. There was a mistake.

If someone has the same problem, there is a solution: https://github.com/adobe-webplatform/Snap.svg/issues/153

0
source

If you want to create transformations in an element in svg using the transform object, this will be a process of five (5) steps:

1.) .

var attachTransObject=myElement.transform

2.) .

var transObjList=attachTransObject.baseVal

3.) Transform.

var requestTransformObj=mySVG.createSVGTransform()

4.) / .

requestTransformObj.setScale(-1,1)

5.) .

transObjList.appendItem(requestTransformObj)

, , .

, y, x, y :

var x=parseFloat(myText.getAttribute("x"))
var y=parseFloat(myText.getAttribute("y"))

var attachTransObject=myText.transform
var transObjList=attachTransObject.baseVal
var requestTransformObj=mySVG.createSVGTransform()
requestTransformObj.setTranslate(x,y)
transObjList.appendItem(requestTransformObj)
var requestTransformObj=mySVG.createSVGTransform()
requestTransformObj.setScale(-1,1)
transObjList.appendItem(requestTransformObj)
var requestTransformObj=mySVG.createSVGTransform()
requestTransformObj.setTranslate(-x,-y)
transObjList.appendItem(requestTransformObj)

, :

transform="translate(153.785 94.71) scale(-1 1) translate(-153.785 -94.71)"
+3

More articles:


All Articles