Question

摆弄以下示例：

<html>
<head>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
     width="1024px" height="1024px" viewBox="0 0 1024 1024" style="background-color: yellow">

    <text x="0" y="29"
          font-family="'Lucida Grande', sans-serif"
          font-size="32">

        Regular ol' text here. Hi.

    </text>

</svg>
</body>
</html>

当我在Chrome中检查<text>时，它显示高度为35.7969px。我不确定这个数字是否基于屏幕分辨率/密度。

两个问题：

1）<text>的x和y坐标代表什么？

2）有没有办法删除<text>内的填充，以便文本完全符合元素？

Answer 1

1）回答问题x和y的含义：

它是文本基线起始位置的x，y坐标（位于第一个字符的左下角）。

打开具有SVG支持的浏览器，复制此HTML代码，阅读评论：

<!-- box (x,y) = 500x500 -->
<svg width="500" height="500">
<rect x="0" y="0" width="500" height="500"/>

<!-- yellow text (x/2, 0) -->
<text x="250" y="0" font-family="serif" font-size="25"
 fill="yellow">Easy-peasy Easy-peasy</text>
 
<!-- green text (0, y/2)  -->
<text x="0" y="250" font-family="serif" font-size="25"
 fill="green">Easy-peasy Easy-peasy</text>
 
<!-- green line from (0, 0) to (x/2, y/2) = center-->
<line x1="0" y1="0" x2="250" y2="250" stroke="green"/>

<!-- red line from (x/2, y/2) = center to left side (0, 250)  to -->
<line x1="250" y1="250" x2="0" y2="250" stroke="red" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 3"/>

</svg>

了解SVG <text> x-y坐标和填充

1 个答案: