为什么SVG文字元素太高？

Question

我注意到文本元素的根坐标不像rect元素位于左上角：

有没有一种设置方式，当文本元素位于（0,0）时，它可以放在父元素内？

Answer 1

如果我对您的理解很好，则可以使用此功能：

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline

A）铬浏览器

svg {
  dominant-baseline: hanging;
}

https://jsfiddle.net/e7vc4bqj/

B）Chromium和Firefox

.text {
  dominant-baseline: hanging;
}

https://jsfiddle.net/3zskd148/

SVG文本坐标默认用于定义其左下角： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

希望获得帮助：）

Answer 2

  

为什么SVG文本元素太高？

x元素的y和<text>坐标指定文本基线的开始。这完全有道理。您不希望它位于第一个字符的左上角-因为那样一来，要获得不同大小和样式的文本就很难了。

SVG中没有全局选项可以改变这种行为。但是，请参见下面的替代方法）

  

有没有一种设置方式，当文本元素位于（0,0）时，它可以放在父元素内？

通常，您只需要根据字体大小调整y坐标即可。

不过，您可以使用几种替代方法：

1. 一个是xxx-baseline属性（如@gengns所指出的），可以更改字符字形相对于基线的放置方式。但是请注意，由于混合的浏览器支持，这些属性并不完全可靠。另外，它们还取决于包含正确数据表的字体。并非所有字体都具有这些表格。

2. 一个更好的IMO选项是使用dy属性。这为文本位置增加了一个相对偏移量。意味着文本实际上位于(x, y + dy)处。并且所有浏览器都支持它。

<svg width="200" height="150">

  <rect x="0" y="0" width="200" height="150" fill="skyblue"/>

  <text x="0" y="0"
        font-size="25px" dy="1em">asd</text>
  
</svg>