SVG旋转文本，单位为百分比

Question

我尝试旋转一个SVG文本。通过从XSLT调用PHP函数，我获得了文本的位置，例如15%。问题是我无法使用百分比来旋转SVG对象。如果使用数字代替百分比，则可以正常工作。

以下是简化后的问题描述：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full">
  <text x="50%" y="50%" transform="rotate(-90 50% 50%)">rotateMe</text>
  <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>

这张图片在我浏览器屏幕的中央位置：

我希望它看起来像这样：

但由于百分号的原因，它不能正常显示。

transform="rotate(-90 **50% 50%**)"

我需要使用百分号来表示坐标，有什么解决办法或想法吗？

提前感谢。

- Chris

Answer 1

你可以使用内部<svg>元素来翻译坐标系。以下示例在Firefox浏览器中与您的“我希望它看起来像这样”的位图相匹配。

如果您无法在任何浏览器上看到文本，请尝试向内部<svg>元素添加overflow="visible"，以便您可以看到它的位置。并不是所有浏览器都支持dominant-baseline属性，因此您可能需要调整文本的y属性。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="50%" y="50%" width="100" height="100">
      <text text-anchor="end" dominant-baseline="text-before-edge" transform="rotate(-90 0 0)">rotateMe</text>
  </svg>
  <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/>
</svg>

- Robert Longson

---

谢谢，它有效:) 我想旋转文本的原因是因为X轴标题。感谢您的答案，我可以旋转文本。但是我在for-each语句中标注了x轴，看起来像一个稍微弱一点的曲线在x轴标题处。后面的标签比前面的标签略高。:( 有什么想法为什么会发生这种情况吗？ - Chris