Измените ширину элемента g (и все его содержимое), чтобы точно соответствовать ширине SVG

Question

Я работаю над программой, которая динамически генерирует svgs, например:

<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

Вместо изменения содержимого элемента g в соответствии с svg вы можете изменить svg viewBox.Я удалил преобразование элемента svg g.Также я удалил высоту svg elelemt.

Вместо того, чтобы использовать .getBoundingClientRect для элемента g, вам нужно использовать .getBBox().Это дает вам положение и размер группы, и вы можете использовать эти данные для нового значения 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>