SVG：为什么 y= "0"从视口之外开始，而不是在文本的上边缘开始？

Question

这是唯一阻止我了解协调系统的工作...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="400" x="0" y="0">  
    <text x="0" y="0">  
        <tspan>&#x2709;</tspan>
    </text>  
</svg>

如果y轴指向下降，为什么y="0"从视口的外部开始？它不应该从顶端开始吗？它把我的逻辑吹走了...

X轴指向右侧，它在视口的左边缘开始，现在这是逻辑和正常行为。

为什么y轴行为会这样？还是为什么要从外部开始，而不是另一个？这背后的逻辑是什么？除非我误解了它的工作原理...

Answer 1

这全都在SVG规范中

初始坐标系在顶部/左侧的原点，x轴指向右侧，y轴指向

文本的原点基本上是字形的左下角，用于从左到右文本。

对于大多数用途拉丁文本（即写作模式：LR，文本锚：开始和对齐基线：基线），字形中的对齐点将是字形单元格左边缘的交叉点（或其他一些字形特定的X轴坐标，指示左侧起点点）带有字形的拉丁基线。

Answer 2

默认基线在文本下降，可以使用attry-baseline变更基线，这是MDN示例

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
    <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />
    <text dominant-baseline="auto" x="30" y="20">Auto</text>
    <text dominant-baseline="middle" x="30" y="50">Middle</text>
    <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>