Doesn't update <use /> tag "href" attribute when `renumerateIRIElements` is true

[bodasooqa]

I have the code in my svg:

<svg ...>
  <path ... />
  <defs>
    <path id="refresh" ... />
    <clipPath id="refresh-clip">
      <use href="#refresh" />
    </clipPath>
  </defs>
  <g clip-path="url(#refresh-clip)">
    ...
  </g>
</svg>

And as a result ids and clip-path are updated: refresh-1, refresh-clip-2, url(#refresh-clip-2), but href attribute of <use /> is still #refresh

[tanem]

Thanks for the report. Can you please create a working repro I can look at by forking the basic usage example?

[cocoychris]

@bodasooqa I just ran into the same issue today as well. Took me a while to find out why some part of my svg is not showing. Good to know I am not the only one who had ran into this issue. Thanks for bringing this up.

@tanem Thanks for maintaining ReactSVG. I think I can provide some information that would help reproduce this issue.

Here is the original svg file I am using:

before.svg

After transpiled by ReactSVG, some part of it can not be displayed:

after.svg

This is how I use ReactSVG in my code:

import { ReactSVG } from "react-svg"; // Using "react-svg": "^16.1.31",

export default function App() {
  return <ReactSVG src="/before.svg" />; // I didn't set any props. Just use it in the default way
}

The reason I found:

the <path id="clipper"> tag is renamed to <path id="clipper-6"> however the <use href="#clipper"> tag is not updated to <use href="#clipper-6"> . Please see after.svg:

The before.svg in plain text for reference:

<svg width="500" height="500"
    viewBox="0 0 500 500"
    xmlns="http://www.w3.org/2000/svg" fill="#6699ff" stroke="#ffffff" stroke-width="5">

    <defs>
        <path id="clipper" d="M350 0 L100 400 L600 500 Z" />
        <clipPath id="ghost_standing:wave_animated">
            <use href="#clipper" x="0">
                <animate
                    attributeName="x" values="0;-210;0"
                    dur="3s" repeatCount="indefinite" />
            </use>
        </clipPath>
        <clipPath
            clipPathUnits="userSpaceOnUse"
            id="ghost_standing:eye_clipper">
            <rect
                width="100"
                height="100"
                x="-50"
                y="-20">
                <animate
                    attributeName="y"
                    values="-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;-20;30;-20;-20;-20;-16;-12;-8;-4;0;4;8;10;50;-40;-20"
                    dur="9s" repeatCount="indefinite" />
            </rect>
        </clipPath>
        <g
            id="ghost_standing:eye_animated"
            clip-path="url(#ghost_standing:eye_clipper)">
            <circle cx="0" cy="0" r="50" fill="white"
                stroke="#cccccc"
                stroke-width="4px" />
            <circle cx="0" cy="0" r="25" fill="black" stroke="none" />
        </g>
    </defs>

    <path
        clip-path="url(#ghost_standing:wave_animated)"
        d="M 457.18552,483.64124 H 42.814481 c 0,0 -21.185211,-465.919231 207.185509,-465.919231 228.37072,0 207.18553,465.919231 207.18553,465.919231 z"
        transform="scale(0.9) translate(25 25)" />
    <use
        x="225"
        y="170"
        href="#ghost_standing:eye_animated"
        width="100%"
        height="100%" />
    <use
        x="335"
        y="170"
        href="#ghost_standing:eye_animated"
        width="100%"
        height="100%" />
</svg>

Hope this would help.