Question

我已经看到很多东西暗示着这种可能性：

第一个链接是最好的，它显示了文本的缩放比例。

我已经实现了此功能的垃圾JavaScript版本，但是我想将其应用于许多元素，我认为SVG是一个更好的选择。

但是，我从第一个链接复制代码的尝试并没有得到相同的结果，这是行不通的：

<head>
<style>
* {
  padding: 0px;
  margin: 0px;
}
/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: red;
  color: black;
}
</style>
</head>
<body>
<div class="ad-wrapper">
  <svg class="ad" xmlns="http://www.w3.org/2000/svg">
    <text font-family="'proxima-nova', sans-serif">Mountain</text>
  </svg>
</div>
</body>

想知道我在做什么错以及如何解决。我想让文本居中于响应框（甚至是正方形）的中心，其中文本各边的填充都按比例缩放，并且按比例放大，而根本不需要使用JavaScript。

Answer 1

始终使用viewBox属性。 viewBox="0 0 100 100"将为您提供一个方形框。给文本分别输入x和y。在这种情况下，您可以使用x="50" y="50"以使文本居中，您可以使用text-anchor:middle;dominant-baseline:middle

* {
  padding: 0px;
  margin: 0px;
}
/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
 
  top: 0;
  left: 0;
  background: red;
  color: black;
}

text{fill:black;text-anchor:middle;dominant-baseline:middle}

<div class="ad-wrapper">
<svg class="ad" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <text x="50" y="50" font-family="'proxima-nova', sans-serif">Mountain</text>
</svg>
</div>

如何在SVG中制作可缩放以适合容器的自适应文本

1 个答案: