如何根据容器的大小缩放 SVG 文本？
[英]How do I scale SVG text depending on the size of the container?
问题描述
How can I scale svg text in a container so that the inter-letter distance does not change, but the text size changes?
如何在容器中缩放 svg 文本，以便字母间距离不会改变，但文本大小会发生变化？ In simple words, so that the font and location of the text remain unchanged.简单来说，就是让文字的字体和位置保持不变。 And the size was adjusted to the width of the container.并将大小调整为容器的宽度。 Thanks!)谢谢！）
.text { text-align: center; width: 320px; margin: 0 auto; color: #fff; font-size: 10vw; font-family: sans-serif; svg { width: 100%; height: 100% } } text { font-family: sans-serif; font-weight: 900; color: #fff; }
<div class="text"> <svg> <text x="0" y="50" textLength="320" class="a">Hello</text> <text x="0" y="100%" font-size="100%" textLength="320" fill = " red " class="b">WORLD</text> </svg> </div>
1 个解决方案
解决方案1
0 2020-10-01 02:09:49
This can be fixed by changing the SVG to be the entire width of the parent (in this case, the body) and by removing the textLength property.这可以通过将 SVG 更改为父级（在本例中为主体）的整个宽度并删除textLength属性来解决。 in place, add text-anchor for horizontal positioning and dominant-baseline for vertical alignment:就地，添加用于水平定位的text-anchor和用于垂直对齐的dominant-baseline ：
.text { text-align: center; width: 100%; margin: 0 auto; color: #fff; font-size: 10vw; font-family: sans-serif; } svg { width: 100%; height: 100%; } text { font-family: sans-serif; font-weight: 900; color: #fff; }
<html> <body> <div class="text"> <svg> <text x="50%" y="50%" text-anchor="middle" class="a">Hello</text> <text x="50%" y="50%" text-anchor="middle" dominant-baseline="hanging" font-size="100%" fill = " red " class="b">WORLD</text> </svg> </div> </body> </html>
Note: This snippet does cut off the bottom of the text, but that is because the SVG does not have a defined height in CSS.注意：这个片段确实切断了文本的底部，但这是因为 SVG 在 CSS 中没有定义的height 。 This is something you will need to add for your final implementation.这是您需要为最终实现添加的内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.