I have an svg design like this:
when I put this svg into the Tree component with renderCustomNodeElement prop, svg changes like this:
Does anyone know why is this happening?
You can see the full code from here: https://codesandbox.io/s/rd3t-v2-custom-svg-tag-forked-dp4bbt?file=/src/App.js
When viewing your code in the inspector, you can see the following class is added to your elements:
.rd3t-node {
cursor: pointer;
fill: #777;
stroke: #000;
stroke-width: 2;
}
Those stroke attributes are what's causing it. I cannot immediately tell what's causing it, but it seems to be a class added by the react-d3-tree library.
I added the following to your styles.css, which fixed it.
svg .rd3t-node {
stroke-width: 0px;
}
Note that if you add anything that has a stroke to your svg, this might also mess with the stroke. It would be better to check the react d3 tree documentation to see if you can override it in a better way.