gpt4 book ai didi

svg - 使文本适合框的纯 SVG 方式

转载 作者:行者123 更新时间:2023-12-03 05:52:21 24 4
gpt4 key购买 nike

盒子尺寸已知。文本字符串长度未知。使文本适合框而不破坏其纵横比。

enter image description here

经过一晚上的谷歌搜索和阅读 SVG 规范后,我很确定如果没有 JavaScript,这是不可能的。我能得到的最接近的是使用 textLengthlengthAdjust 文本属性,但这仅沿一个轴拉伸(stretch)文本。

<svg width="436" height="180"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
</svg>

enter image description here

我知道SVG Scaling Text to fit containerfitting text into the box

最佳答案

我没有找到一种方法可以直接在没有Javascript的情况下完成它,但是我找到了一个非常简单的JS解决方案,没有for循环,也没有修改字体大小并且适合所有尺寸,也就是说,文本增长直到最短边的极限。

基本上,我使用 transform 属性,计算所需大小和当前大小之间的正确比例。

这是代码:

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.2" viewBox="0 0 1000 1000" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" >
<text id="t1" y="50" >MY UGLY TEXT</text>
<script type="application/ecmascript">

var width=500, height=500;

var textNode = document.getElementById("t1");
var bb = textNode.getBBox();
var widthTransform = width / bb.width;
var heightTransform = height / bb.height;
var value = widthTransform < heightTransform ? widthTransform : heightTransform;
textNode.setAttribute("transform", "matrix("+value+", 0, 0, "+value+", 0,0)");

</script>
</svg>

在前面的示例中,文本会一直增长到width == 500,但如果我使用的框大小为width = 500height = 30,然后文本会增长直到 height == 30

关于svg - 使文本适合框的纯 SVG 方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15430189/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com