摆弄以下示例：
<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>
当我<text>在 Chrome 中检查时，它显示高度为 35.7969px。我不确定这个数字是否基于屏幕分辨率/密度。
两个问题：
1）x和y坐标代表什么<text>？
2）有没有办法删除内部填充，<text>使文本完全适合元素？
它是文本基线起始位置的 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>| 归档时间： |
|
| 查看次数： |
7095 次 |
| 最近记录： |