0

I'm aiming to create an interactive SVG like the following: https://codepen.io/iamandrea/pen/rNjPemO

Basically, I want to load an SVG and allow the user to click and modify the paths.

This example uses Two.Js, however, and I'm having trouble translating this to React. After doing some research, I'm not sure if it's the best library to combine for this task.

I was wondering if anyone knew a library that could do something similar? Otherwise, if there's a technique to gather onClick data from an SVG anchor point, that way I can make my own. All I can find so far is how to click an entire SVG rather than the anchors.

jQuery(function($){
    $('path').click(function(){
  this.style.fill = "#"+colors[i++%colors.length];
});

Sorry that I don't have any other code to show, I've been searching for answers all day and haven't found anything.

Appreciate any help in advance :)

iamandrea
  • 31
  • 4
  • 1
    You can bind click on a react element: ` ....} />` Did you try? – Michael Rovinsky Apr 24 '21 at 15:50
  • Yeah but this selects the whole path rather than one point in the path – iamandrea Apr 24 '21 at 22:10
  • So you should bind `click` on , not on . I also suggest to rewrite your sample with D3 instead of jQuery, it will make your code much more manageable – Michael Rovinsky Apr 25 '21 at 07:11
  • Unfortunately, binding on circle/line still selects the entire circle rather than the anchor points as per the codepen example. I'm not using jQuery either, but valid point - that code snippet was just an example of the closest thing I could find. I ended up creating a component where I manually enter the x/y coordinates of the bezier curve to create the shape I want. While this works, it'd be more ideal if there was a way to use an existing SVG, however, this will do for now. I'll leave the question open in case someone has a better method. – iamandrea Apr 25 '21 at 22:37

0 Answers0