css - 在 Chrome 和 Firefox 中居中 SVG 文本渐变

Question

我在让我的 SVG 文本在 Firefox 和 Chrome 中居中时遇到问题。我还没有费心检查其他浏览器。我目前在 Firefox 中水平居中，但在 Chrome 中它偏离了几个像素。我注意到在 Chrome 中，文本并没有完全填满 <svg> 的宽度。元素在右侧留下空间，从而偏离居中。 Firefox 底部的垂直居中也有几个像素的不同。如何解决？不确定我的代码做错了什么。要查看问题的实时 View ，请转到 https://wsplays-members.com/results/在两个浏览器中查看“OUR CERTIFIED RESULTS”标题。提前致谢。

.widget-title {
  border-bottom: solid 3px black;
  font-family: 'anton', sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin: 2px auto 0;
  background: url(images/lines.png) bottom repeat-x;
  line-height: 1;
  padding-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
}

<!--SVG TITLE HEADER-->
<div class="widget-title">
  <svg height="30px" width="270px" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(226, 69, 38);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(34, 34, 34);stop-opacity:1" />
        </linearGradient>
      </defs>
      <text fill="url(#grad1)" x="0" y="97%">Our Certified Results</text>
      Sorry, your browser does not support inline SVG.
    </svg>
</div>
<!--END SVG TITLE HEADER-->

Answer 1

首先，您的 viewBox是无效的。您不能在 viewBox 中使用百分比值.因此它将被忽略。但在你的情况下你并不需要它。

无论如何，您的问题是您在 <div> 中将 SVG 居中。但您没有将 SVG 中的文本居中。

如果您希望您的文本在 SVG 中居中，请将其准确定位在中心并使用 text-anchor="middle" .

在您的情况下，您需要将文本元素更改为:

<text fill="url(#grad1)" x="135" y="97%" text-anchor="middle">Our Certified Results</text>

在下面的示例中，我增加了 width SVG 和文本 x位置，因为我们必须使用更宽的字体。

.widget-title {
  border-bottom: solid 3px black;
  font-family: 'anton', sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin: 2px auto 0;
  background: url(images/lines.png) bottom repeat-x;
  line-height: 1;
  padding-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
}

svg {
  border: solid 1px green;
}

<!--SVG TITLE HEADER-->
<div class="widget-title">
  <svg height="30px" width="450px">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(226, 69, 38);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(34, 34, 34);stop-opacity:1" />
        </linearGradient>
      </defs>
      <text fill="url(#grad1)" x="225" y="97%" text-anchor="middle">Our Certified Results</text>
      Sorry, your browser does not support inline SVG.
    </svg>
</div>
<!--END SVG TITLE HEADER-->