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

【问题标题】：Change width of g element (and all its content) to fit exactly SVG width更改 g 元素（及其所有内容）的宽度以完全适合 SVG 宽度
【发布时间】：2019-07-01 03:27:50
【问题描述】：

我正在开发一个像这样动态生成 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 宽度？

【问题讨论】：

标签： jquery html css svg

【解决方案1】：

您可以更改 svg viewBox，而不是更改 g 元素的内容以适应 svg。我已经删除了 svg g 元素的变换。我还删除了 svg elelemt 的高度。

您需要使用.getBBox()，而不是使用.getBoundingClientRect 作为g 元素。这为您提供了组的位置和大小，您可以将此数据用于 viewBox 的新值。

如果您需要较小的 svg 元素高度并且不介意变形，您可以将 preserveAspectRatio="none" 添加到 svg 并保持高度

<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>

【讨论】：