SVG以%为单位旋转文本

SVG以%为单位旋转文本,svg,rotation,transform,Svg,Rotation,Transform,我尝试旋转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" xml

我尝试旋转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>
我需要使用%作为坐标。对我的问题有什么想法或解决办法吗


高级版谢谢。

您可以使用内部
元素转换坐标。下面的示例按照Firefox上的“我希望它看起来像这样”位图显示

如果您在使用的任何浏览器上都看不到文本,请尝试将overflow=“visible”添加到内部
元素中,以便查看它的最终位置。并非所有浏览器都支持主基线属性,因此您可能需要修改文本的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>

旋转体
谢谢,它可以工作:)我之所以要旋转文本,是因为有一个x轴标题。谢谢你的回答,我可以旋转文本。但我在for each语句中为xaxis添加了标题,它在x轴标题处看起来有点弱曲线。后面的标签比前面的稍高。:(你知道为什么会发生这种情况吗?)???
<?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>