Usando Inkscape, he generado archivos svg que contienen rutas que son identificables por identificación personalizada. El objetivo es implementar un componente React que renderice uno de esos archivos svg, diseñe una ruta dada por id y transfiera la funcionalidad onClick al elemento de ruta con estilo. En mi opinión, hay dos enfoques.

Primero, uno podría cargar el archivo svg como un objeto de datos (mutable) y manipular el elemento de ruta directamente. No quiero hacer esto.

En segundo lugar, esto podría lograrse superponiendo el archivo svg en el fondo (ImageElement) con un elemento svg con estilo que cubra el elemento de la ruta original y otro que proporcione la funcionalidad del evento. Para "copiar y pegar" la ruta dada desde la capa de fondo a la capa con estilo, quiero leer el atributo <d> de la ruta del archivo svg.

 renderSvgElement() { // from this.props.src get <d> attribute of path this.props.pathID ... } render () { const ImageElement = React.forwardRef((props, ref) => <img style={this.styles.img} src={this.props.src} ref={ref} onClick={this.imageClick.bind(this)} />); return ( <div style={this.styles.container} ref={(node) => this.container = node} > <ImageElement ref={this.imgRef} /> <svg id="styled-layer" ref={(node) => this.styledSvg = node} style={this.styles.styledCanvas} > {this.renderSvgElement()} </svg> <svg id="onClick-layer" ref={(node) => this.onClickSvg = node} style={this.styles.onClickCanvas} > {this.renderOnClickSvgElement()} </svg> </div> );

He probado variaciones de

 path = document.querySelector("..."). contentDocument.querySelectorAll("path[path-id='...']")[0].getAttribute("d");

sin éxito ya que el objeto de datos parece ser nulo en el primer renderizado, al menos en la forma en que lo implementé. ¿Necesito configurar el objeto de datos en ComponentLoad / usando ganchos React, por ejemplo, useEffect? Usar HTML DOM de tal manera se siente poco elegante y no "reactivo". ¿Hay una mejor manera?