【问题标题】:SVG align on the rightSVG 向右对齐
【发布时间】:2012-08-16 20:51:10
【问题描述】:

我试图将多行 svg 文本向右对齐,但最后一行文本总是在右侧更远,我不知道为什么。

重要的东西。

<svg style="border:1px solid blue;" text-anchor="end">
    <text font-size="30px">
        <tspan x="100%" dy="30">tspan line 1</tspan>
        <tspan x="100%" dy="35">tspan line 2</tspan>
        <tspan x="100%" dy="35">tspan line 3</tspan>
    </text>
</svg>

http://jsfiddle.net/kCuSa/

【问题讨论】:

    标签: html text svg


    【解决方案1】:

    SVG 文本的默认设置是压缩空白。这意味着文本开头和结尾的所有空格都被删除,中间被压缩为一个空格。

    每个&lt;tspan&gt; 元素周围都有空格。第一个 &lt;tspan&gt; 之前和最后一个 &lt;tspan&gt; 之后的空格被删除,所以最后一个 &lt;tspan&gt; 一直向右。第二个之后的空格只被压缩到一个空格(注意换行符也变成了空格)所以中间行实际上是“tspan line 2”

    如果您删除 > 和

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-16
      • 2017-06-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多