cbourne Posted April 4, 2023 Share Posted April 4, 2023 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> Link to comment Share on other sites More sharing options...
PointC Posted April 4, 2023 Share Posted April 4, 2023 Basic append to SVG element. See the Pen 48362b3142b2341213984f4b560b6c37 by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
cbourne Posted April 4, 2023 Author Share Posted April 4, 2023 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 Link to comment Share on other sites More sharing options...
PointC Posted April 4, 2023 Share Posted April 4, 2023 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 Link to comment Share on other sites More sharing options...
cbourne Posted April 4, 2023 Author Share Posted April 4, 2023 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 ? Link to comment Share on other sites More sharing options...
Solution PointC Posted April 4, 2023 Solution Share Posted April 4, 2023 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 3 Link to comment Share on other sites More sharing options...
cbourne Posted April 4, 2023 Author Share Posted April 4, 2023 Great that did the trick. Thanks very much. Link to comment Share on other sites More sharing options...
cbourne Posted September 15, 2023 Author Share Posted September 15, 2023 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. Link to comment Share on other sites More sharing options...
akapowl Posted September 15, 2023 Share Posted September 15, 2023 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now