svg内固定比例的文本段落

Question

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

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

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

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

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

svg内固定比例的文本段落

Text paragraph with fixed ratio within svg

javascript

html

css

svg