Resizing single shapes dynamically without scaling the whole SVG

Question

I have an arrow as a SVG which\'s length I want to alter in response to the width of a wrapping DIV (for example).

All my previous attempts have led into this behavior (

Answer 1

** EDITED **

This behavior is caused by your viewBox attribute on . Your SVG’s aspect ratio is being preserved by default. You want this behavior on #Triangle and #Rectangle-3, but not on #Rectangle-2 (you want the height to increase, but the width to stay the same).

I think you'll want to add preserveAspectRatio=none to your inline CSS and then do some tweaking (since that messes up the aspect ratio of your #Triangle and #Rectangle-3 - or instead of that, you could try changing the height of #triangle-2 to the same height as your wrapper div (in my JS fiddle I've done it this way, setting #Triangle-2s height to 25vh). Play with the height of the window - #Rectangle-2's height elongates but doesn't change width, although I haven’t yet got your #Rectangle-3 to dynamically stick to the bottom of #Rectangle-2 (#Rectangle-3 is stuck at bottom of window): https://jsfiddle.net/KyleVassella/dnagft6q/6/

I suspect you’ll know how to fix this, but either way I’ll keep working on it and in the meantime you can read up here where there is much more info on this subject:

How can I make an svg scale with its parent container?