Tengo un diseño svg como este:
cuando coloco este svg en el componente Tree con renderCustomNodeElement prop, svg cambia así:
¿Alguien sabe por qué sucede esto?
Puede ver el código completo desde aquí: https://codesandbox.io/s/rd3t-v2-custom-svg-tag-forked-dp4bbt?file=/src/App.js
Al ver su código en el inspector, puede ver que se agrega la siguiente clase a sus elementos:
.rd3t-node { cursor: pointer; fill: #777; stroke: #000; stroke-width: 2; }Esos atributos de trazo son lo que lo está causando. No puedo decir de inmediato qué lo está causando, pero parece ser una clase agregada por la biblioteca react-d3-tree.
Agregué lo siguiente a su styles.css, que lo arregló.
svg .rd3t-node { stroke-width: 0px; } Tenga en cuenta que si agrega algo que tenga un trazo a su svg, esto también podría interferir con el trazo. Sería mejor consultar la documentación del react d3 tree para ver si puede anularlo de una mejor manera.