svg - 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%**)"

我需要使用 % 作为坐标。对我的问题有任何想法或解决方案吗？

提前谢谢你。

Answer 1

<svg>您可以使用内部元素翻译坐标。下面的示例根据您在 Firefox 上的“我希望它看起来像这样”位图显示。

如果您在使用的任何浏览器上都看不到文本，请尝试将 overflow="visible" 添加到内部<svg>元素，这样您就可以看到它的结束位置。并非所有浏览器都支持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>