Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality.
However, I am facing an issue where I want the two SVGs to align vertically when the browser window is narrow enough. I believe I can solve this by dynamically adding or removing a class based on the window size and adjusting the CSS accordingly, but my attempts so far have been unsuccessful.
To demonstrate where I am in the process, here is a JSFiddle link: JSFiddle Link
$(function() {
$(window).on('resize', function() {
var chart = $("#rightEl");
var container = chart.parent();
var targetWidth = container.width();
chart.attr("width", targetWidth > 300 ? 300 : targetWidth)
.attr("height", targetWidth > 300 ? 300 : targetWidth)
//when targetWidth is less than "n" I want them to align vertically
}).trigger("resize");
})#leftEl {
width: 300px;
position: absolute;
}
#right-wrapper {
margin-left: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="placeholder"></div>
<svg id="leftEl" width="300" height="300" class="svg-container">
<circle cx="150" cy="150" r="150" class="r" stroke="black" stroke-width="2"></circle>
</svg>
<div id="right-wrapper" width="300" height="300">
<svg id="rightEl" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" width="300" height="300">
<circle cx="150" cy="150" r="150" stroke="black" stroke-width="2"></circle>
</svg>
</div>
</body>
</html>