Question

我在将SVG文本置于Firefox和Chrome中心时遇到问题。我还没有费心去检查其他浏览器。我目前在Firefox中水平居中，但在Chrome中，它只有几个像素。我注意到在Chrome中，文字没有填满<svg>元素的宽度，在右侧留下了空间，从而抛弃了居中。 Firefox中底部的几个像素的垂直居中也不同。怎么解决这个问题？不确定我的代码中出错了什么。要查看问题的实时视图，请转到两个浏览器中的https://wsplays-members.com/results/，然后查看＆＃34;我们的认证结果＆＃34;标题。提前谢谢。

＆＃13;

.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;
}

＆＃13;

<!--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-->

＆＃13;

Answer 1

首先，您的viewBox无效。您无法在viewBox中使用百分比值。因此它将被忽略。但是你无论如何也不需要它。

无论如何，你的问题是你将SVG置于<div>的中心，但你并没有将文本置于SVG的中心。

如果您希望文本在SVG中居中，请将其放在正确的中心并使用text-anchor="middle"。

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

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

在下面的示例中，我增加了SVG的width和文本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-->

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

1 个答案: