SVG文本元素的垂直翻转

Question

我有一个关于svg文本元素的问题。我想将它沿y轴翻转。为此，我使用了scale（-1,1）函数。

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

但元素似乎是相同的。变换不起作用。

如果我尝试通过scale(1,-1)函数沿水平轴翻转，它可以工作。

请问，我做错了什么？

- Martin Hrabal

---

你能在 jsfiddle 上放一个测试例子吗？我不确定你的 getMatrix 等是什么。 - Ian

你似乎在使用自定义库，但是如果不告诉我们它是什么，我们就无法帮助你。下面的答案使用纯JavaScript和W3 SVG接口方法。 - AmeliaBR

Answer 1

如果您想使用变换对象在SVG中对元素进行变换，这是一个由五(5)个步骤组成的过程:

1.) 将变换附加到您的元素上。

var attachTransObject=myElement.transform

2.) 为该附加变换制作一个转换列表。

var transObjList=attachTransObject.baseVal

3.) 启动一个转换请求对象。

var requestTransformObj=mySVG.createSVGTransform()

4.) 执行/请求所需的转换。

requestTransformObj.setScale(-1,1)

将该请求添加到元素的转换列表中。

transObjList.appendItem(requestTransformObj)

这可能看起来有点晦涩，但一旦理解了这五个步骤，就会变得非常流畅。

例如，要在其x、y点上将文本元素沿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)" 

- Francis Hemsher

---

也许这只是语言问题，但是你让我感到困惑了，“将变换附加到您的元素”和“创建一个变换列表”。变换列表已经存在于元素上，您只需将其保存到变量中以便于访问。 - AmeliaBR

针对原帖，这是一个简单的工作示例：http://fiddle.jshell.net/LvuS3/。请注意，在这个 fiddle 中，文本最初是通过 transform 位置确定的，因此我可以将负比例因子作为列表中的附加转换添加进去。如果文本是通过 x 和 y 值定位的，则需要像 @Francis Hemsher 的代码一样进行调整（否则你的内容会反射在 svg 边界之外）。 - AmeliaBR

Answer 2

谢谢帮忙。我忘了说我使用 Snap svg 库。那里有个 bug。

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

- Martin Hrabal