AS3SVGRenderer
AS3SVGRenderer copied to clipboard
Changing SVG Path at runtime
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?
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.
Yes. You can call invalidate methods. To change the flag.
InvalidateRender, to be more specific
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.
There is a validated event: https://github.com/lucaslorentz/AS3SVGRenderer/blob/master/SVGRenderer/src/com/lorentz/SVG/display/base/SVGElement.as#L28
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);
}