Okay, I'm not that into SVG-files (kinda funny, now that I'm maintaining ha-floorplan)... Therefore, I'm not that used to using SVG-specific terms, and I'll for sure mess something up...

But here we go....

I've removed the text-element from the svg's in the below example.

Case 1 is that you've a rect-element added within the parent rect:
https://user-images.githubusercontent.com/3549445/192117533-452d6bbe-7215-412d-aa22-e4ca6ae0ff3e.png

Case 2 is that you've a svg-file, added within your parent rect:
https://user-images.githubusercontent.com/3549445/192117602-ca922b13-f5a6-4df2-91ef-3c88497f7484.png

Case 1

You've added a rect, with has the x and y location, including the ry (radius on the y-axis), width and height.

1
2
3
4
5
6
<rect style="..." id="rect-small"
width="149.0197"
height="29.019693"
x="24.972649"
y="45.462151"
ry="0.020820931" inkscape:label="rect-small"></rect>

Change the width and height, and the size changes.
Change x and y, and the rect-element moves around.
Change ry, and you have "border-radius" like results, due to the shape (20 width, 20 height and 10 ry will give you a circle), but let's skip this one for now.

There's nothing more going on here.

Case 2

Well, now we know what a normal rect is made, and we'll now try and add a child svg file, within a rect.

Here's your code, again stripped down a bit, of the new svg file which you're adding to the dom:

<svg
x="24.97264862060547"
y="45.46215057373047"
width="149.01968383789062"
height="29.019691467285156" 
preserveAspectRatio="xMinYMin meet"
id="rect2"
viewBox="0 0 150 30"
>
  <g transform="translate(-38.97833,-77.829717)">
    <rect style="fill:#ffdd55;fill-opacity:1;stroke:#ff0000;stroke-width:0.980306;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke" id="rect2" width="149.0197" height="29.019693" x="39.468483" y="78.31987" ry="0.020820931" inkscape:label="rect2"></rect>
  </g>
</svg>

Notice that you're starting with a new svg wrapper, which both contains x and y, but also a width and height.
In the g element, you've already added a translate(-38.97833,-77.829717) value, you're also playing around with x and y, now not only on the parent svg, but also the child svg, and the rect, too.

So what now?

My personal take could be to strip down your inner svg-elements, but I'm not sure if that makes the work in Inkscape (very) problematic...?

<img width="1578" alt="image" src="https://user-images.githubusercontent.com/3549445/192118330-554ae933-67c0-483b-9201-8f681ad561ca.png">
Here I've stripped down the child svg element, so it's actually only containing the rect element.

1
2
3
4
5
6
7
8
# rect-on.svg
    <rect
       style="fill:#ffdd55;fill-opacity:1;stroke:#ff0000;stroke-width:0.980306;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
       id="rect2"
       width="149.0197"
       height="29.019693"
       ry="0.020820931"
       inkscape:label="rect2" />

For your case, having the rectto show up on the right location in the frame, will require you to define x and y, ofc...

I'm not sure what the best solution could be for you, but you can't expect four elements to align, where you have scaling and positioning in play. I guess there must be a work-around in Inkscape, but I've not had the need to play around with that.

TL;DR

You're playing around with multiple properties which defines how the svg-files and rects elements is displayed on your screen, and currently it looks a bit messy. There must be some advance users here, how can give you some tips and tricks.

I'll recommend you to see if it's possible to simply your solution a bit, cause it's just a question about your scaling

Edit

Pub: 29 Sep 2022 14:51 UTC

Edit: 29 Sep 2022 14:54 UTC

Views: 89