Jump to content


setting dimensions and position of dynamically added, nested SVG elements

Recommended Posts


I’m attempting to dynamically add multiple instances of an SVG within a larger framing SVG.

I thought if I gave each dynamically created instance its own viewBox that I would be able to define the width, height, x, y, and z values with the units of the containing SVG’s viewBox.

I’ve also tried putting each instance in an SVG group and defining the width, height, x, y, and z values for the group, but these values appear to be overridden or ignored.


The instance appears to be centered and maximized withing the containing SVG's viewBox.

Ultimately, I’d like to add perspective and populate this scene with clusters of these flowers receding into the distance using GSAP animation.

Some of these nested functions can likely be consolidated in the final version.  My first idea was to put all of the elements and attributes in multidimensional arrays, but I later decided that navigating the arrays was creating additional iterations, so I’m explicitly defining the attributes and parent element for each SVG element before calling a function to add the element.

There’s probably something simple I’m missing about how units are calculated in nested viewBoxes.

Thanks for your help!

See the Pen wvxZgJo?editors=1000 by fcdobbs (@fcdobbs) on CodePen

Link to comment
Share on other sites

I read your post a few times and I'm kinda fuzzy on exactly what you're asking here. We love helping with GSAP-related questions (please see the forum guidelines) - did you have any of those? 


Here are some tips that will increase your chance of getting a solid answer:


  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue - "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo (looks like you got that - super).


Link to comment
Share on other sites


I’d like to be able to scale and position dynamically created, nested SVG’s that were created on different scales in Illustrator.

I expected that if I use the viewBox exported from Illustrator and apply x, y, and width values to the SVG on the scale of the parent viewBox that the artwork would be scaled and positioned according the parent viewBox.

Maybe this codepen will make it easier to follow.

These three tests use the same x and y coordinates and the same width.

The middle test that has no viewBox is the pattern I expected, but it’s also not complex art created in Illustrator.

The top and bottom tests have SVG’s with their own viewBoxes.  I tried adding the x, y and width to the g element in one and to the nested SVG itself in the other.

I’d like to understand how these x, y and width values are being interpreted.

I’d also like to figure out how to get the SVG’s with their own viewBox’s to scale and position relative to the parent SVG’s viewBox, in this case with the nested SVG width 10% of the parent height and with the first element positioned at 50% of the parent height.

Thanks again!

See the Pen oNMRjgQ?editors=0011 by fcdobbs (@fcdobbs) on CodePen

Link to comment
Share on other sites

I think you'll significantly improve your chances of getting an answer if you simplify things quite a bit and only focus on one question at a time. Instead of a CodePen that has 150 lines of code and 3 completely different SVG scenes, jQuery, etc., and then asking about how properties affect <g> elements, how to have some SVGs with viewBoxes and some without, how to position something on the y-axis based on an x-axis percentage, etc...maybe just start with baby steps like "here's one SVG nested inside another - how can I center it?" (or whatever). 


Baby steps. 


Once one question is answered, you could move on to the next. 


As for how GSAP applies the x/y/width/height stuff, just think of it like a high-speed property manipulator. There are no pre-defined lists of properties you're allowed to animate/set. "x", "y", "scaleX", "scaleY", and "rotation" are all just shortcuts for transforms like transform: translateX(...), etc. But width and height are directly set as CSS properties (as is pretty much everything else). 


Friendly reminder: these forums are for GSAP-related questions, not general SVG/CSS/HTML questions (please see the forum guidelines). We're happy to chime in with tips for low-hanging fruit on other topics when we've got the expertise and availability...but in general we need to focus our attention on helping folks primarily with GSAP-related stuff.

Link to comment
Share on other sites

Thanks. I think I figured out how to position and scale a nested dynamically added SVG with a viewBox.  The  x, y, width and height to parameters have to be set inside attr:{} for the SVG with the viewBox property.  If applied outside of the attr:{} they have no effect.  Also if they are applied either inside or outside of attr:{} of a parent <g>, they have no effect.  If the nested dynamically added SVG has no viewBox the parameters can be either inside or outside attr:{}.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.