Question

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

是否有可能根据内容长度获得具有固定宽高比的div？我已经设法通过减小宽度来获得这样的div，直到比率或多或少地符合目的。但是这个解决方案相当不精确，需要在将div实际插入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内具有固定比率的文本段落

1 个答案: