Question

我正在开发一个程序，该程序可以动态生成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宽度？

Answer 1

您可以更改svg viewBox而不是更改g元素的内容以适合svg。我删除了svg g元素的转换。另外，我还删除了svg elelemt的高度。

您无需使用.getBoundingClientRect来代替g元素。这为您提供了组的位置和大小，您可以使用此数据作为viewBox的新值。

如果您需要较小的svg元素高度并且不介意变形，则可以向svg添加.getBBox()并保持高度

preserveAspectRatio="none"

更改g元素的宽度（及其所有内容）以完全适合SVG宽度

1 个答案: