我正在开发一个可以动态生成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/

10-12 12:46
查看更多