Adjust the width of the g element and all of its contents to perfectly match the width of the SVG

Currently, I am developing a program that dynamically generates svgs like the one shown below:

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

When utilizing jQuery to determine the widths of the svg and g elements, I obtain the following results:

$('svg')[0].getBoundingClientRect().width = 802.79

$('svg > g')[0].getBoundingClientRect().width = 786.33

I aim for the width of the g element to precisely match that of the svg element. How can I achieve this?

I experimented with the following approach:

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

However, this solution doesn't work as expected - my rect element loses its initial width/height and becomes very small.

If you have any insights on how to ensure that the g element (along with all its content) always adjusts its width to fit the svg width, please let me know.

jqueryhtmlcsssvg

Answer №1

Instead of adjusting the contents of the g element to match the svg, consider modifying the viewBox of the svg. By removing the transform from the svg g element and eliminating the height attribute of the svg element, you can achieve the desired result.

Make sure to use .getBBox() instead of .getBoundingClientRect for the g element. This will provide the position and size data of the group which can be utilized to update the viewBox accordingly.

If a smaller height for the svg element is needed without worrying about distortion, simply add preserveAspectRatio="none" to the svg tag while keeping the height attribute.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal a bootstrapTable column with the power of JavaScript or jQuery

I have incorporated bootStrap Table in order to display information for my users based on the following example. In my table, I am attempting to hide the Edit and Delete options by concealing the operate (Delete User Column) data field. I attempted using ...

javascriptjqueryhtmlbootstrap-table

"Exploring the World of Ajax Links and the Power

So I have this situation on my website where there's a link that says "Add" and when clicked, the page refreshes and it changes to "Remove". I think using ajax instead of reloading the page would be more efficient. How can I achieve this functionality ...

jqueryajaxhyperlink

Special characters are causing the fill effect to malfunction

When the effect is applied to a single word without spaces or special characters, it works perfectly. However, as soon as I add another word, the effect immediately glitches. Codepen /* Text-fill */ .text-fill { position: relative; font-size: 100 ...

htmlcss

Tips for preventing curved links in a radial tree diagram created with d3

I am currently utilizing this code to generate a radial tree diagram for my data. However, I am looking to make a modification to eliminate curved links. My preference is for linear connections instead of curved ones as the curved links can make the visual ...

javascripthtmld3.js

The issue with linking to files on a custom 404 error page is that it doesn't function properly when

Having some trouble with my 404 page. I seem to have figured out the issue. The following URL works fine: sia.github.io/404.html and so does this one: sia.github.io/ooofdfsdfaablahblah However, when navigating to sia.github.io/1/2/3/, everything seems to ...

javascripthtmlthree.js

Using Web API Controller to trigger a JQuery function

Having searched through numerous posts, I was unable to find a specific discussion on integrating a Web API Controller into the MVC Framework. Therefore, I decided to create a post addressing this topic. In my case, I am working with C# and my controller ...

c#jqueryajaxmodel-view-controller

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

Retrieve a collection from the server with Backbone

I am encountering an issue while trying to retrieve a collection from my server. The version I am using is 0.3.3 (not the master from github). Unfortunately, I keep running into this exception: Uncaught TypeError: Cannot use 'in' operator to sea ...

javascriptjqueryrestbackbone.js

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

I am working on a dynamic table with 5 rows, each row containing 3 columns - partNO, quantity, and a delete button. Each row is assigned a unique ID for identification purposes. If a user deletes the second row, I want the IDs of the remaining rows to be ...

jqueryhtml

What is the best way to conceal my class element if the data-reviews number is under 5?

I have been experimenting with basic JavaScript for the data-reviews="2" scenario and it worked successfully. However, what I am aiming for is to hide the entire <span> section when the value of data-reviews is less than 5 or any specific ...

javascripthtmlcss

How to Style Background with CSS on the Server-Side? (Including Links and Hover Effects)

I'm facing a dilemma in choosing between an ASP.NET control and an HTML element for creating a button with a CSS-defined background that changes on hover... 1. Initially, it seems the ASP.NET ImageButton control is not suitable for this purpose becau ...

asp.netcssbackgroundhoverserver-side

404 Error: Unable to Locate Post Route

I've been trying to send a POST request to a specific route, but for some reason it's not working and keeps giving me a 404 Not Found error. Here is the code snippet for the route: app.post('/case/new', (req, res) => { Case.creat ...

jquerynode.jsajaxexpresshttp-post

Struggle for dominance between Bootstrap carousel and Flexslider

Issue with Bootstrap carousel and Flex-slider. When both included, the flex slider does not work properly if I remove bootstrap.js. However, without bootstrap.js, the flex slider works but the carousel malfunctions. Code Snippet: <div class="carousel- ...

jqueryhtmlcsstwitter-bootstrapflexslider

Achieving a shadow effect above a CSS border: tips and tricks

<div class="row"> some content <div class="info-box"> some other content </div> </div> .row { float: left; margin-bottom: 1.5%; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border ...

css

The never-ending scroll feature utilizing backbone.js

I've been exploring backbone.js and I'm curious if there is a simpler way to implement an 'endless-scroll' feature for models/collection than the options I've come across so far (there are plenty for jquery, and likely more for oth ...

jquerybackbone.jsinfinite-scroll

Having trouble setting the width of a div. The styling keeps getting overridden by something else

I'm facing an issue where the style I need is not showing up in the source code. Specifically, I am attempting to make the .widgettext element narrower, but so far I have had no success. Unfortunately, I cannot share the entire theme on a platform lik ...

htmlcss

After being redrawn, the line on the canvas vanishes

After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle? <script language=" ...

javascriptjqueryhtmlcanvasline

Using Angular UI-Bootstrap typeahead within a table

Here's a straightforward question - how can I configure the typeahead feature to function in a table that is linked to a different table than the one my typeahead utilizes? For instance, suppose I have a foreign key in one table and I want users to b ...

htmlangularjsangular-ui-bootstrapangular-ui-typeahead

Having trouble getting a background image with tint to display properly in Bootstrap

I applied a sleek black transparent gradient to my body background picture, but as soon as I integrated bootstrap into the HTML code, the effect ceased to function. body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba ...

htmlcssbootstrap-4

Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results ...

jquerycsscss-transforms