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

Question

我看到很多事情都暗示着这种可能性：

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

我已经实现了此功能的 janky 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

属性。 A

viewBox="0 0 100 100"

会给你一个方框。给文本一个

和

。在这种情况下，您可以使用

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 中制作可缩放以适合容器的响应式文本

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1