SVG:文本在FF和Chrome中的居中位置不同 [英] SVG: Text centerd differently in FF and Chrome
问题描述
我有以下SVG内容
<svg height="64" width="64" class="ng-star-inserted">
<rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
</rect>
<text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
missing
</text>
</svg>
实际上是一个带有一些文本的灰色框.文本应居中-垂直和水平居中.我将整个内容放置在Bootstrap 4结构中的输入字段(类型file
)旁边.但是,根据浏览器的不同,SVG中文本中心的计算方式似乎有所不同.
整个代码如下:
<li class="media">
<div class="mr-3">
<svg height="64" width="64" class="ng-star-inserted">
<rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
</rect>
<text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
missing
</text>
</svg>
</div>
<div class="media-body">
<h5 class="mt-0 mb-1">{{getLabel()}}</h5>
<input class="form-control-file" type="file" type="file" >
</div>
</li>
如图中的
所示,文本missing
位于左侧(FF)的正上方.我可以将50%
的中心对齐方式更改为32px
,这对于Chrome来说是完美的选择,但对于FF
,则应该为34px
.我猜想FF开始计算x
整个行的高度,而不是图像开始.
将alignment-baseline="middle"
更改为center
,hanging
baseline
也不能解决问题.
是否有一种方法可以修复它,使其在两个浏览器中均能正常工作?
添加dominant-baseline="middle"
并按以下方式编辑代码:
<text alignment-baseline="middle" dominant-baseline="middle" text-
anchor="middle" x="50%" y="50%">
missing
</text>
链接到文档 >
这是我在Chrome和Firefox中测试过的 codepen代码段.
I have the following SVG content
<svg height="64" width="64" class="ng-star-inserted">
<rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
</rect>
<text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
missing
</text>
</svg>
which makes essentially a grey box with some text. The text should be centered - vertically and horizontally. I place the whole thing in a Bootstrap 4 structure next to a input field (type file
). But somehow the center of the text in the SVG seems to be calculated differently depending on the browser.
The whole code looks like:
<li class="media">
<div class="mr-3">
<svg height="64" width="64" class="ng-star-inserted">
<rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
</rect>
<text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
missing
</text>
</svg>
</div>
<div class="media-body">
<h5 class="mt-0 mb-1">{{getLabel()}}</h5>
<input class="form-control-file" type="file" type="file" >
</div>
</li>
as seen in the picture the text missing
is on the left side (FF) just above the supposed center. I can change the center alignment of 50%
to 32px
which would be perfect for Chrome but for FF
it should be 34px
. I guess FF starts calculating for the x
the whole row height and and not image-start.
Changing alignment-baseline="middle"
to center
, hanging
baseline
did not fix the problem either.
Is there a way to fix it so it works in both browser identically?
Add dominant-baseline="middle"
and edit your code like this:
<text alignment-baseline="middle" dominant-baseline="middle" text-
anchor="middle" x="50%" y="50%">
missing
</text>
Here's the codepen snippet that I tested in both Chrome and Firefox.
这篇关于SVG:文本在FF和Chrome中的居中位置不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!