SVG以％为单位旋转文本 [英] SVG rotate text with % as Unit

问题描述

我尝试旋转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%**)"

使用％作为坐标是我的要求.对我的问题有任何想法或解决方案吗?

谢谢你.

解决方案

您可以使用内部的<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>

I try to rotate a svg text. i get the position of the text as % i.e. 15% by calling a php function from xslt. the problem is that i can not rotate a svg object using %. it works if i use a digit number instead. Below i present the problem as simplified:

<?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>

this pic is in the middle of my browser screen

And i want that it looks like this:

but it dont work because of %

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

it is a requirement for me to use % for the coordinates. Any ideas or solution to my problem?

Thank you in advanced.

解决方案

You can translate the co-ordinates using an inner <svg> element. The example below displays as per your "i want that it looks like this" bitmap on Firefox.

If you can't see the text on whatever browser you are using, try adding overflow="visible" to the inner <svg> element so you can see where it ends up. Not all browsers support the dominant-baseline attribute so you may need to fiddle about with the text's y attribute instead.

<?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>

这篇关于SVG以％为单位旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！