Html SVG：为什么文本没有呈现在矩形中？_Html_Svg

Html SVG：为什么文本没有呈现在矩形中？

html svg

Html SVG：为什么文本没有呈现在矩形中？,html,svg,Html,Svg,下面的代码最终剪切“Hello world”文本（即使文本的起始Y坐标为10）你好，世界如果我是allign，文本的X&Y都是0。然后文字几乎完全从我们的眼睛里消失了（我们只能看到一点点）：你好，世界我希望X&Y为0,0的文本被渲染，就像Y设置为20（匹配字体大小px）时被渲染一样。因为文本的默认开头假定为左上角。此行为使文本的开始点位于左下角时显示 <!doctype html> <html> <body> <svg wid

下面的代码最终剪切“Hello world”文本（即使文本的起始Y坐标为10）


你好，世界

如果我是allign，文本的X&Y都是0。然后文字几乎完全从我们的眼睛里消失了（我们只能看到一点点）：


你好，世界

我希望X&Y为0,0的文本被渲染，就像Y设置为20（匹配字体大小px）时被渲染一样。因为文本的默认开头假定为左上角。此行为使文本的开始点位于左下角时显示

<!doctype html>
<html>
<body>
    <svg width="400" height="100">
        <rect x="0" y="0" width="100" height="50" fill="yellow"/>
        <text text-anchor="start" x="0" y="20" font-size="20px" font-family="Papyrus" fill="blue">Hello World</text>
    </svg>
</body>
</html>


你好，世界

问题：为什么0,0不在矩形中呈现文本？

SVG中的cordinates系统与我们常用的（画布或传统数学中的）系统不同。引用，文档的左上角被视为点（0,0），或原点，如下所示：

也就是说，默认情况下，文本位于从（0,0）开始的不可见线的顶部。您可以使用不同的方式对齐文本，使其位于中间或挂在这一行上

<!doctype html>
<html>
<body>
    <svg width="400" height="100">
        <rect x="0" y="0" width="100" height="50" fill="yellow"/>
        <text text-anchor="start" x="0" y="0" font-size="20px" font-family="Papyrus" fill="blue">Hello World</text>
    </svg>
</body>
</html>

<!doctype html>
<html>
<body>
    <svg width="400" height="100">
        <rect x="0" y="0" width="100" height="50" fill="yellow"/>
        <text text-anchor="start" x="0" y="20" font-size="20px" font-family="Papyrus" fill="blue">Hello World</text>
    </svg>
</body>
</html>