为什么SVG Text元素太高?

问题描述 投票:0回答:2

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

enter image description here

有没有办法设置它,以便当文本元素位于(0,0)时,它适合父元素?

svg
2个回答
1
投票

如果我理解你,你可以使用这个:

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

A)Chromium浏览器

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

希望这有帮助:)


-1
投票

为什么SVG Text元素太高?

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>
© www.soinside.com 2019 - 2024. All rights reserved.