在 svg 中具有固定比例的文本段落

Text paragraph with fixed ratio within svg

本文关键字：文本 段落 svg      更新时间：2023-09-26

我使用 JavaScript 即时生成动态 SVG 图形。为此，应将一段文本添加到 svg 图像内具有固定纵横比的框中。短文本长度和非常长文本长度之间的文本长度可能有所不同。由于实际字体大小对我的目的并不重要，因此我使用 viewBox 属性来显示框中的整个段落。到目前为止，据我研究和测试，svg 不提供任何自动换行功能，因此我可能会在foreignObject中使用标准 HTML div来使用 HTML 换行。

是否有可能根据其内容长度获得具有固定纵横比的div？我已经设法通过迭代减小宽度来获得这样的div，直到比率或多或少符合目的。但是这个解决方案相当不精确，需要在实际将其插入 svg 之前将div 添加到 DOM 中。有没有CSS解决方案？

不幸的是，没有人可以帮助解决这个问题，我实现了以下（或多或少有效）解决方案：

for(var i = 0; i < 200; i++){
    if($('#wrapper').width()/$('#wrapper').height() <= 5){
        console.log($('#wrapper').width()/$('#wrapper').height())
        break;
    }
    $('#wrapper').width($('#wrapper').width()*0.8);
}
for(var y = 0; y < 200; y++){
    if($('#wrapper').width()/$('#wrapper').height() >= 4.9){
        break;
    }
    $('#wrapper').width($('#wrapper').width()*1.02);
}

此方法尝试以迭代方式将纵横比收敛到近似正确的比率。

到目前为止，这不是一个最佳解决方案，但至少是一个可行的解决方案。

相关文章：