我正在开发一个可以动态生成svg的程序,如下所示:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="330.75" height="41.91000000000008" viewBox="0 0 330.75 41.91" xml:space="preserve">
<desc>Created with Fabric.js 2.4.3</desc>
<defs></defs>
<g transform="matrix(6.75 0 0 1.27 165.38 20.96)">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(25, 205, 255); fill-rule: nonzero; opacity: 1; transform-origin: 50px 0px; transform: translateX(0%) translateY(0px);" x="-24" y="-16" rx="0" ry="0" width="48" height="32"></rect>
</g>
</svg>
当使用jQuery来确定svg和g元素的宽度时,我得到以下信息:
$('svg')[0].getBoundingClientRect().width = 802.79
$('svg > g')[0].getBoundingClientRect().width = 786.33
我希望g元素的宽度完全适合svg的宽度。拜托,我该怎么做呢?
我尝试了如下方法:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="330.75" height="41.91000000000008" viewBox="0 0 330.75 41.91" xml:space="preserve">
<desc>Created with Fabric.js 2.4.3</desc>
<defs></defs>
<g width="330.75" height="41.91000000000008">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(25, 205, 255); fill-rule: nonzero; opacity: 1; transform-origin: 50px 0px; transform: translateX(0%) translateY(0px);" x="-24" y="-16" rx="0" ry="0" width="48" height="32"></rect>
</g>
</svg>
但它不起作用,我的矩形失去了初始的宽度/高度,变得非常小。
请问我如何使g元素(及其所有内容)的宽度始终适合svg宽度?
最佳答案
您可以更改svg viewBox而不是更改g元素的内容以适合svg。我删除了svg g元素的转换。我也删除了svg elelemt的高度。
代替对g元素使用.getBoundingClientRect
,您需要使用.getBBox()
。这为您提供了组的位置和大小,您可以将此数据用于viewBox的新值。
如果您需要较小的svg元素高度,并且不介意变形,则可以在svg中添加preserveAspectRatio="none"
并保持高度
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="330.75" viewBox="-24 -16 48 32" xml:space="preserve">
<desc>Created with Fabric.js 2.4.3</desc>
<defs></defs>
<g id="theGroup">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(25, 205, 255); fill-rule: nonzero; opacity: 1; transform-origin: 50px 0px; transform: translateX(0%) translateY(0px);" x="-24" y="-16" rx="0" ry="0" width="48" height="32"></rect>
</g>
</svg>
关于jquery - 更改g元素的宽度(及其所有内容)以完全适合SVG宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56829706/