将交互式 SVG 动态加载到 Vue.js 项目中

Question

I have an old project built years ago with spaghetti jQuery code, which I'd like to update to use a JS framework (mostly for the usual reasons: better scaleability, better state management, cleaner/more maintainable code, etc.). I find Vue.js especially intriguing.

The project allows the user to load any of a large selection of .svg files from a directory on the server into the DOM dynamically, then interact with them (mostly clicking to change fill/line colors of individual path elements, handled by jQuery plus a plugin ).

After some research and experimentation, I haven't found a simple way to do this with Vue--as best I can tell, I would need to manually edit each .svg file to put the (many) bindings in place to allow for discrete parts of the .svg to have interactivity. This is a dealbreaker due to the large number of files and the need to quickly add new ones.

My vague question (sorry) is: can anyone point me toward a better solution? (A framework better suited to this? A way in Vue to replicate this kind of interactivity with a plain .svg? A way to automate modifying the .svg files to have Vue bindings on their arbitrary numbers/types of svg elements?)

Thanks--

Answer 1

The easiest way in Vue to add interactivity is to convert them to components
but this won't work in your situation because the svg's are uploaded by users.

So you'll need to find or write a component that adds this feature to your app.

Take a look at https://github.com/seiyable/vue-simple-svg for inspiration.