I've been working on a big project involving dynamic interactive SVG drawings using Vue.js & SVG.js.
One problem I've faced for a resizable dynamic path (dynamic meaning that the path definition changes from UI using Vue state) was that after first resize, whenever I was changing the path from the app UI and another resize was started again, during resize the path had the old shape
I've looked into the code to discover the cause, and I've found out that the first resize it's storing the path definition as an array of points into an _array property of the SVG object.
Then I've found that for paths there is a clear() method on the SVG library, which does just that, it clears this array, so next time it will be regenerated
Thus, in order to fix my bug I just had to call this path.clear() method after each patch change / update
Maybe this will help others!
I've been working on a big project involving dynamic interactive SVG drawings using Vue.js & SVG.js.
One problem I've faced for a resizable dynamic path (dynamic meaning that the path definition changes from UI using Vue state) was that after first resize, whenever I was changing the path from the app UI and another resize was started again, during resize the path had the old shape
I've looked into the code to discover the cause, and I've found out that the first resize it's storing the path definition as an array of points into an
_arrayproperty of the SVG object.Then I've found that for paths there is a
clear()method on the SVG library, which does just that, it clears this array, so next time it will be regeneratedThus, in order to fix my bug I just had to call this
path.clear()method after each patch change / updateMaybe this will help others!