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>

Link to documenttion

Here's the codepen snippet that I tested in both Chrome and Firefox.

这篇关于SVG:文本在FF和Chrome中的居中位置不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！