svg中固定比例的文本段落答案

【问题标题】：Text paragraph with fixed ratio within svgsvg中固定比例的文本段落
【发布时间】：2015-01-15 15:35:37
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

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

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);
}

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

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

【讨论】：