CODEWITHSUNDEEP
javascriptsvg
Martin Hrabal
Martin Hrabal

Reputation: 102

Svg text element vertical flip

I have problem with svg text element. I want to turn it over y axis. For this, I using scale(-1,1) function. 

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

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

If I try to turn over horizontal axis, by scale(1,-1) function. It works

Please, What I doing wrong?

Upvotes: 3

Views: 2926

Answers (2)

Martin Hrabal
Martin Hrabal

Reputation: 102

Thanks for help. I forgot to say that I use the library Snap svg. It was bug there.

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

Upvotes: 0

Francis Hemsher
Francis Hemsher

Reputation: 3488

If you want to create transforms on an element in svg using the transform object, it is a five(5) step process:

1.) Attach the transform to your element.

var attachTransObject=myElement.transform

2.) Make a transform list for that attached transform.

var transObjList=attachTransObject.baseVal

3.) Start a Transform request object.

var requestTransformObj=mySVG.createSVGTransform()

4.) Perform/request the desired transform.

requestTransformObj.setScale(-1,1)

5.) Append the request to the transform list for the element.

transObjList.appendItem(requestTransformObj)

This may seem a bit obtuse, but once you understand these five steps, it is quite seamless.

For example, to flip a text element around the y axis, at its x,y point would be as follows:

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)

This would build a transformation on the text element similar to:

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

Upvotes: 3

Related Questions