svg:为什么 y=“0"?在视口之外而不是在文本的顶部边​​缘开始? [英] svg: why does y="0" start outside the viewport instead of in the top edge for text?

问题描述

这是唯一让我无法理解协调系统如何工作的...

This is the only thing preventing me from understanding how the coordination system works...

<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" 从视口的外部开始?它不应该从顶部边缘开始吗?这让我的逻辑崩溃了...

If the y-axis points down why does y="0" start from the outside of the viewport? Shouldn't it start right at the top edge? It blows my logic away...

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

The x-axis points to the right and it starts right in the left edge of the viewport, now this is logic and normal behavior.

为什么 y 轴的行为是这样的?或者为什么让一个从外面开始而另一个不?这背后的逻辑是什么?除非我误解了它的工作原理...

Why does the y-axis behave like this? Or why make one start from the outside and the other not? What is the logic behind this? Unless I'm misunderstanding how it works...

推荐答案

一切尽在 SVG 规范

初始坐标系的原点在上/左，x轴指向右侧，y轴指向下方

the initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down

文本的来源基本上是左侧字形的左下角- 向右文本.

The origin for text is basically the bottom left corner of the glyph for left-to-right text.

对于拉丁文本的大多数用途(即writing-mode:lr、text-anchor:start 和alignment-baseline:baseline)，字形中的对齐点将是字形单元格左边缘的交点(或一些其他特定于字形的 x 轴坐标指示左侧原点)与字形的拉丁基线.

For most uses of Latin text (i.e., writing-mode:lr, text-anchor:start and alignment-baseline:baseline) the alignment-point in the glyph will be the intersection of left edge of the glyph cell (or some other glyph-specific x-axis coordinate indicating a left-side origin point) with the Latin baseline of the glyph.

这篇关于svg:为什么 y=“0"?在视口之外而不是在文本的顶部边​​缘开始?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！