AS3SVGRenderer icon indicating copy to clipboard operation
AS3SVGRenderer copied to clipboard

Changing SVG Path at runtime

Open GitterHubber opened this issue 5 years ago • 6 comments

Is there a way to dynamically change the path property of the SVGElement at runtime. I have a main SVG that I rendered on stage and it has many SVGElements. I want to change the path of one of the SVGElement, so I tried using the "svgPath" property which is a string.

I am trying to set a path string to this property, but my issue is that the path string I take from another SVG which has different co-ordinates so I don't think it draws the path at the correct location and scale. In short I would like to take a path from one SVG and overwrite another SVG's SVGElement path with that one.

Is this currently possible?

GitterHubber avatar Jan 04 '20 20:01 GitterHubber

I did some more tests, and after setting the "svgPath" value string on a SVGElement, I see that render() is not being called. Or its being called but the "_renderInvalidFlag" is false so it aborts rendering. Is there anyway to force rendering after setting the "svgPath" property.

GitterHubber avatar Jan 05 '20 13:01 GitterHubber

Yes. You can call invalidate methods. To change the flag.

lucaslorentz avatar Jan 05 '20 17:01 lucaslorentz

InvalidateRender, to be more specific

lucaslorentz avatar Jan 05 '20 17:01 lucaslorentz

I'm doing something like this


svgElePath.svgPath = "some new svg path string";
svgElePath.invalidateRender();

however there is no change in the SVG render output

but if I do

svgElePath.svgPath = "some new svg path string";
svgElePath.validate();

I do see some change in the SVG but its not the desired result as per my requirements.

Further to this is there an event that will tell me that the new path has finished rendering. I need to know the bounds of the newly rendered path so that I can position and scale it as per the old path that was in that element. But I see that the new bounds are equal to the old path bounds.

GitterHubber avatar Jan 05 '20 18:01 GitterHubber

There is a validated event: https://github.com/lucaslorentz/AS3SVGRenderer/blob/master/SVGRenderer/src/com/lorentz/SVG/display/base/SVGElement.as#L28

lucaslorentz avatar Jan 05 '20 20:01 lucaslorentz

Thanks for the info, I used the validate event but it seems the correct bounds of the object is still not computed after validate() it still reports the old bounds.

My code is like so

loop per SVGElement

							var svgElePath:SVGPath = svgEle as SVGPath;
							
							// get the bounds of the object, clone rect just in case lib is reusing it
							var pathBounds:Rectangle = svgElePath.getBounds(svgElePath.parent).clone();
							
							// set new path into element and render
							svgElePath.svgPath = "some svg path";

                           // save old bounds in obj
							svgElePath.obj = pathBounds;

							svgElePath.addEventListener(SVGEvent.VALIDATED, onPathValidated);
							svgElePath.validate();

The in my validate event callback

		private function onPathValidated(evt:SVGEvent):void {
			var svgElePath:SVGPath = evt.target as SVGPath;
			
			svgElePath.removeEventListener(SVGEvent.VALIDATED, onPathValidated);
			
			// get old bounds
			var pathBounds:Rectangle = svgElePath.obj as Rectangle;

			// get new bounds of the element
			var pathNewBounds:Rectangle = svgElePath.getBounds(svgElePath.parent);
			
			// bounds traces equal over here
			trace(pathBounds + " >> " + pathNewBounds);
		}

GitterHubber avatar Jan 06 '20 07:01 GitterHubber