Question

我有svg文本元素的问题。我想把它转过y轴。为此，我使用scale（-1,1）函数。

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

但元素似乎是一样的。转型不起作用。

如果我尝试翻转水平轴，则按比例（1，-1）功能。它的工作原理

拜托，我做错了什么？

Answer 1

如果你想使用变换对象在svg中的元素上创建变换，那么这是一个五（5）步骤：

1。）将变换附加到元素。

var attachTransObject=myElement.transform

2。）为附加的变换创建变换列表。

var transObjList=attachTransObject.baseVal

3.）启动转换请求对象。

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)"

Answer 2

感谢您的帮助。我忘了说我使用的是库Snap svg。那是虫子。

如果有人遇到同样的问题，有解决办法： https://github.com/adobe-webplatform/Snap.svg/issues/153

Svg文本元素垂直翻转

2 个答案: