Append circle to SVG ID

[cbourne]

Does GSAP support appending items to exiting SVG ID's ? I have an SVG documents with an id of "test" and want to append a simple circle to it. 

 

So basically target the "test" id in the svg and append a circle to it. 

 

<div id="scene1-svg" class="chart">
<svg>
...
<rect id="test" class="cls-23" x="55.95" y="63.64" width="85.14" height="60.94"></rect>
...
</svg>
</div>

 

 

[PointC]

Basic append to SVG element.

See the Pen 48362b3142b2341213984f4b560b6c37 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[cbourne]

Great - thanks for this. If I want to target and add the rectangle to an ID within the SVG, how would I do this ? 

 

I

[PointC]

I'm not sure I follow. Are you talking about groups? If so, you can append to the group just like appending to the parent SVG. You could also look at insertAdjacentElement()

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

[cbourne]

So in my SVG, I have this: 

<rect id="test" class="cls-23" x="55.95" y="63.64" width="85.14" height="60.94"></rect>

I want to append above this. So if this was a group, how would I target it ? 

[PointC]

Name the group and target that instead of the SVG itself. Use insertAdjacentElement() to place it at the beginning or end of the stacking order. Here's a quick fork of my demo from above with that change.

 

See the Pen ddabccb18ac315841327a88a7a5c338c?editors=1010 by PointC (@PointC) on CodePen

[cbourne]

Great that did the trick. Thanks very much. 

[cbourne]

Hi based on the above example, I would like to include some text within the appended rectangle. Could you please show how to do this. 

[akapowl]

 

Hello @cbourne

 

This is nothing really GSAP related - and we like to keep this forum focussed on GSAP specific questions. Please just keep that in mind.

Maybe @PointC's guide on how to create SVGs dynamically with JS can help get a better general understanding.
 

https://www.motiontricks.com/creating-dynamic-svg-elements-with-javascript/

 

Also here's a codepen demo by somebody else showcasing how to add text to an existing SVG.

See the Pen XYXNwq by kaykay (@kaykay) on CodePen

This could then result in something like this for the earlier example within this thread. I hope this will help.

See the Pen rNozJOm by akapowl (@akapowl) on CodePen

 

If you want the text to appear inside the appended blue rect, you will probably need to just position it properly, as I don't think you can nest it inside the rect. Something like this maybe.

See the Pen vYvJdxb by akapowl (@akapowl) on CodePen

 

https://stackoverflow.com/questions/6725288/svg-text-inside-rect