Improve inline svg support for mask and defs

[raix]

Do you want to request a feature or report a bug?
In react dom terms a feature (because it works as expected in Safari - but not in chrome/firefox/ie?)

What is the current behavior?
Given we use an inline icon that includes defs or/and mask Example
And we reuse this icon in multiple places
When the first icon is placed in a div with display "none" the reference is hidden (only true if done on the first icon)

What is the expected behavior?
All icons should render normally without loosing the referenced element.
Reference: https://github.com/raix/react-svg-defs-issue/blob/master/src/App.js

What fixes it?
When creating a special Mask component that keeps a single reference element in a portal / outside the icon itself the problem goes away.

(We currently convert to svg without defs and mask as it doesn't work reliable atm.)

[kunukn]

It seems to be a browser bug/behaviour with given SVG code.
Should ReactJS fix this browser bug?

To work around this bug, we could also as an alternative ensure unique id per SVG component.

const ignoreUpdatedProps = () => true;

const IconUsingDefs = React.memo(({ id = Date.now() }) => (
  <svg height="50" width="50" viewBox="0 0 100 100" version="1.1">
    <defs>
      <circle id={`circle${id}`} cx="50" cy="50" r="50" />
    </defs>
    <g stroke="none" fill="none" fillRule="evenodd">
      <mask id={`themask${id}`} fill="white">
        <use xlinkHref={`#circle${id}`}></use>
      </mask>
      <g mask={`url(#themask${id})`} fill="red">
        <rect x="0" y="0" height="100" width="100"></rect>
      </g>
    </g>
  </svg>
), ignoreUpdatedProps);

[raix]

I also opened issue on Mozilla - the response is that dublicate ids are not supported.

It’s fine if react will not handle the issue - I guess it will often not make sense to inline svg as reusable components if they contain id/mask/defs/references in general.

If so I’ll add it as rules to the eslint-plugin-react-svg package as the recommendation. (As masks could result in issues if reused)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[sami616]

I just want to say thank you for raising this bug. I have spent the best part of the last day figuring out why my svg mask instances were behaving the same.

Worth pointing out now in 2021 that with react 18's useId hook you can very easily assign unique id's to your svg, which has solved this issue for me.