been converted to use "relative" values. NOTE: In order to make things a little easier, the CURVE segments (c) have In order to size the SVG using 9-slice scaling, we have to calculate the path In my root component, I am using several instances of the "pop-up" component, each with a different amount of content:
So, not only do I have to keep the corners of the pop-up "fixed", I also have to keep the carrot's size and position fixed to the center of the bottom length.įirst, let's look at how this component will be consumed. And, to make the experiment even more exciting, the pop-up container has a little bottom carrot. So, to try and bring Geddes' approach into my own mental model, I wanted to see if I could create a Pop-Up component in Angular 7.2.4 that would scale dynamically based on its projected content. His post was awesome - and is very much the inspiration for my post but, his post also showed me that there was no easy answer - that the scaling has to be done using good old-fashion Math. In his post, Geddes creates an SVG component that, more or less, uses the concept of 9-slice scaling to create a custom container. But, ultimately, SVG coordinates appear to be "absolute".Įventually, I came across the post, Dynamic SVG Components by Dave Geddes.
And, Sara Soueidan has a fascinating article on dynamic SVG layouts using nested SVG elements. You can use the "preserveAspectRatio" attribute to influence the way an SVG element scales inside of its viewBox.
Now, again, I'm super new to SVG but, from what I've been reading, this kind of scaling doesn't appear to be part of the SVG semantics. Of course, since the stretchy parts don't really have any detail, the distortion caused by the stretching doesn't result in any funky artifacts. Slicing the rectangle up in this manner allows the "detail rich" parts (ie, the rounded corners) to remain fixed while allowing the "detail poor" parts to be stretched and distorted.
0 kommentar(er)
