0

X 属性是 tspan 元素的绝对 X 坐标。但是我们检查输出是否占用了更多像素。而不是 tspan 元素需要从 30 个像素绘制，而是从 39 个像素绘制。为什么会这样？我的期望是它必须从 30 像素中绘制 在此处输入图像描述

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!
    <tspan x="30" y="20"fill="blue">Sub Elemenent Text!</tspan>
  </text>
</svg>

4

1 回答 1

0

我无法重现该问题。看起来<tspan>是在绝对位置。我将两个元素的第一个字母都更改为“I”，将 x<text>更改为 10。这对我来说很合适。

<svg viewBox="0 0 200 30">
  <line x1=".2" y1="0" x2=".2" y2="30" stroke="gray" stroke-width=".4"/>
  <line x1="10" y1="0" x2="10" y2="30" stroke="gray" stroke-width=".4"/>
  <line x1="20" y1="0" x2="20" y2="30" stroke="gray" stroke-width=".4"/>
  <line x1="30" y1="0" x2="30" y2="30" stroke="gray" stroke-width=".4"/>
  <text x="10" y="15" fill="red">I love SVG!
    <tspan x="30" y="20"fill="blue">I'm Elemenent Text!</tspan>
  </text>
</svg>

于 2021-09-07T12:15:13.800 回答