It seems, that aspectRatio works different in Plasmic in comparison to the default CSS behavior.
I’m trying to achieve, that I compose multiple SVGs into one div. And then I apply aspect-ratio to the div, so it keeps every time the ratio of the composed SVGs independent where it is embedded. The following example written in HTML and CSS is doing perfectly his job:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="parentDiv">
<div class="svgContainer">
<svg
width="14"
height="34"
viewBox="0 0 14 34"
preserveAspectRatio="xMidYMid meet"
xmlns="<http://www.w3.org/2000/svg>"
class="svgChild"
>
<path
class="vis_tooth"
d="M1.55485 32.746L2.00919 32.7141C5.47286 32.471 8.95147 32.5441 12.4018 32.9326C12.694 32.9655 12.9679 32.7061 12.9494 32.4127C12.7199 28.7717 12.0502 9.84007 11.8933 8.85905C11.1266 4.06301 10.9836 0.999898 6.71582 1C3.21088 1.00008 2.30046 4.44303 1.86225 8.85905C1.76205 9.86883 1.16518 28.7547 1.02583 32.2417C1.01427 32.5309 1.26609 32.7663 1.55485 32.746Z"
/>
</svg>
<svg
width="14"
height="34"
viewBox="0 0 14 34"
preserveAspectRatio="xMidYMid meet"
xmlns="<http://www.w3.org/2000/svg>"
class="svgChild"
>
<path
class="vis_tooth"
d="M1.55485 32.746L2.00919 32.7141C5.47286 32.471 8.95147 32.5441 12.4018 32.9326C12.694 32.9655 12.9679 32.7061 12.9494 32.4127C12.7199 28.7717 12.0502 9.84007 11.8933 8.85905C11.1266 4.06301 10.9836 0.999898 6.71582 1C3.21088 1.00008 2.30046 4.44303 1.86225 8.85905C1.76205 9.86883 1.16518 28.7547 1.02583 32.2417C1.01427 32.5309 1.26609 32.7663 1.55485 32.746Z"
/>
</svg>
</div>
</div>
</body>
</html>
CSS
.parentDiv {
width: 1730px;
height: 900px;
border: 3px solid;
}
.svgContainer {
aspect-ratio: 14/34;
display: flex;
border: 1px solid red;
max-width: 100%;
max-height: 100%;
}
.svgChild {
width: 100%;
height: 100%;
}
.vis_tooth {
fill: blue;
stroke: aqua;
}
However, if I try this with Plasmic, applying the aspectRatio leads not to the effect, that svgContainer keeps the aspectRatio. Instead it grows up to the size of the parentDiv.
Attachment 1: SVG Config
Attachment 2: svgContainer Config 1/2
Attachment 3: svgContainer Config 2/2
Attachment 4: parentDiv Config - Width 100px Height 100px
Attachment 5: parentDiv Config - Width 200px Height 100px
As you can see between Attachment 4 & 5, the two SVGs are not keeping the aspectRatio defined at the svgContainer. But if you check my HTML + CSS example, you see, that it keeps the aspectRatio
