SVG文本不在ms边缘垂直居中

Question

当文本不在svg块内垂直居中时，也许有人知道这种情况

<pre>
<svg class="mask-text category-title" viewBox="0 0 69.34375 18"><defs><mask id="mask" x="0" y="0" width="100%" height="100%"><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text></mask></defs><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
<image class="svg-img" width="100%" height="100%" mask="url(#mask)" xlink:href="/uploads/vendor_groups/images/viz1.jpeg?width=1024&amp;height=643" preserveAspectRatio="xMidYMid slice"></image>
</svg>
</pre>

我尝试了alignment-baseline和<text y="50%" x="50%"，但是没有用

Answer 1

在svg的标题中，写上width="100vw" height="100vh"

在这种情况下，垂直居中将适用于x="50%"和alignment-baseline的文本

<pre>
<svg class="mask-text category-title" width="100vw" height="100vh" viewBox="0 0 69.34375 18"><defs><mask id="mask" x="0" y="0" width="100%" height="100%"><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text></mask></defs><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
<image class="svg-img" width="100%" height="100%" mask="url(#mask)" xlink:href="/uploads/vendor_groups/images/viz1.jpeg?width=1024&amp;height=643" preserveAspectRatio="xMidYMid slice"></image>
</svg>
</pre>

现在浏览器窗口中有一个框架，它可以相对于它计算文本<text y="50%"的垂直中点

更新

您可能想使用文本作为遮罩，以使用裁剪后的图像填充文本。
事实证明，图像的格式不会加载。

所以我用1024 X 643

拍摄了另一张与您的图像大小完全相同的图像

<image class="svg-img" 
xlink:href="https://i.stack.imgur.com/mlqrC.jpg" width="1024" height="643" mask="url(#mask)">
</image>

您的程序多了一行文字；我把它注释掉了。
未指定字体大小，我选择了font-size="250px"

下面是可响应的代码，可在除Edge

之外的所有现代浏览器中使用

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg class="mask-text category-title"  viewBox="0 30 1024 643" preserveAspectRatio="xMidYMid meet" >
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect width="100%" height="100%" fill="black" />
<text class="svg-text"  font-size="250px" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
</mask>
</defs>
<!-- <text class="svg-text" dominant-baseline="central" font-size="200px" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text> -->

<image class="svg-img" 
xlink:href="https://i.stack.imgur.com/mlqrC.jpg" width="1024" height="643" mask="url(#mask)">
</image>

</svg>
</div>

边缘以特殊方式缩放并居中图像

所以我不得不用固定值替换百分比x = "50%"和y = "50%"

在此版本的代码中，该应用程序保持响应状态，并且可以在包括Edge

在内的所有现代浏览器中运行

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg class="mask-text category-title"  viewBox="0 30 1024 643" preserveAspectRatio="xMidYMi meet">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect width="100%" height="100%" fill="black" />
<text class="svg-text" dominant-baseline="central" font-size="250px" text-anchor="middle" x="512px" y="300px" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
</mask>
</defs>
<!-- <text class="svg-text" dominant-baseline="central" font-size="250px" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text> -->

<image class="svg-img" 
xlink:href="https://i.stack.imgur.com/mlqrC.jpg" width="1024" height="643" mask="url(#mask)">
</image>

</svg>
</div>

可以通过编辑父块中的width，height-.container

来更改整个文本块的大小