如果我理解你,你可以使用这个:
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
希望这有帮助:)
为什么SVG Text元素太高?
x
元素的y
和<text>
坐标指定文本基线的开始。这完全有道理。你不希望它成为第一个角色的左上角 - 因为要使不同大小和样式的文本排成一行是一件困难的工作。
SVG中没有可以更改该行为的全局选项。但是请参阅下面的备选方案
有没有办法设置它,以便当文本元素位于(0,0)时,它适合父元素?
通常,您只需根据字体大小调整y
坐标。
但是,您可以使用以下几种方法:
xxx-baseline
属性(正如@gengns指出的那样),它可以改变角色字形相对于基线的定位方式。但请注意,由于混合浏览器支持,这些属性并不完全可靠。另外,它们依赖于包含正确数据表的字体。并非所有字体都有这些表。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>