如何使SVG文本垂直居中（在不同的浏览器中）-解网

问：

我正在尝试构建一个类似于这个概念的动画：

因为我希望能够动态设置 SVG 文本，所以我不能使用完全相同的实现。

我的问题在于SVG文本的位置。我能够创建一个带有可以动态设置的文本的蒙版。但是我找不到使文本完全居中（垂直）的方法。

使用似乎是一个不错的方向，但文本仍然没有完全以垂直平面为中心。特别是当文本大小增加时（滚动时就是这种情况），文本没有居中越来越明显。此外，Chromium 和 Firefox 的功能似乎存在很大差异。Firefox似乎将文本呈现得更靠前，这使得它看起来更偏离。dominant-baseline:centraldominant-baseline:central

我创建了一个示例来说明这个问题。

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
}

img {
  width: 100%;
  height: 100%;
}

.mask {
  position: relative;
  height: 100%;
  width: 100%;
  border: 5px solid hotpink;
}

.mask__svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mask__svg .mask__text {
  text-anchor: middle;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 60rem;
  font-weight: bold;
}

.mask__svg .mask__rect {
  mask: url(#svg-mask);
  fill: white;
}

<div class="mask">
  <img src="https://images.unsplash.com/photo-1691520673295-9626f624869b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" />
  <svg class="mask__svg">
    <defs>
      <mask id="svg-mask" x="0" y="0" width="100%" height="100%">
        <rect class="mask__rect" x="0" y="0" width="100%" height="100%" fill="white" />
        <text class="mask__text" x="50%" y="50%" text-anchor="middle" dominant-baseline="central">MASK</text>
      </mask>
    </defs>
    <rect class="mask__rect" x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

我使用了不同的值。我试着玩.我尝试用不同的方法定位 SVG。代码片段中的版本是我最接近 SVG 文本完全居中的版本。dominant-baselinedy

SVG 浏览器定位

如何使SVG文本垂直居中（在不同的浏览器中）

How to center a SVG text vertically (in different browsers)

评论