SVG文本锚左上 [英] SVG Text-anchor top left

问题描述

默认情况下，SVG中text元素的锚点位于左下角，但是我希望它位于左上角，因为我还创建了一个矩形来充当文本的背景，但是它是由于文本比矩形高，因此显示不正确(因为矩形锚点/偏移量位于左上方).有没有一种方法可以解决此问题，因此文本和矩形都可以在相同的坐标处绘制并显示在相同的位置.

By default, the anchor for the text element in SVG is at the bottom left, but I want it to be at the top left, since I am also creating a rectangle to act as the background for the text, but it is displayed incorrectly since the text is higher than the rectangle (because rectangle anchor/offset is at the top left). Is there a way to fix this, so both text and rectangle can be drawn at same coordinates and be displayed in the same location.

推荐答案

主要基线属性/属性对我有用:

The dominant-baseline property/attribute worked for me:

svg {
  dominant-baseline: hanging;
}

这篇关于SVG文本锚左上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！