SVG / CSS文本居中视口更改

Question

我正在尝试将文本元素放在SVG块中，这样当div改变宽度时，文本本身就在div中。它以全屏75％的div左对齐（因此没有定义x）开始，但是当它达到768视口（媒体查询）时，div变为100％宽度，并且SVG需要居中它。

我在桌面和媒体查询中的代码：

.outer {
  width: 100%;
  position: relative;
  top: 25px;
  margin: 0 auto;
}

.left {
  width: 20%;
  float: left;
  vertical-align: middle;
}

.left img {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 75%;
  margin: 0px auto;
  padding-bottom: 10%;
  float: left;
}

svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.serif {
  font-family: 'Times';
  font-weight: 700;
  font-size: 50px;
}

@media only screen and (max-width: 768px;
) {
  .left {
    width: 100%;
  }
  .wrapper {
    width: 100%;
  }
}

<div class="outer">
  <div class="left"><img src="https://dummyimage.com/237x88/000/fff.png"></div>
  <div class='wrapper'>
    <svg viewBox='0 0 500 100'>
      <text class='serif' y='43%'>Header</text>
    </svg>
  </div>
</div>

不幸的是，我无法在此测试媒体查询。

基本上，当.wrapper达到100％

时，如何判断SVG文本？

Answer 1

设置text-anchor:middle;并使用CSS transform将文本移动到viewBox的中间。

@media only screen and (max-width: 768px;
) {
  .left {
    width: 100%;
  }
  .wrapper {
    width: 100%;
  }
  .serif {
    text-anchor: middle;
    transform: translateX(250px);
}