Wrong clipPath ids - uniqueId not set properly on clip-path style attribute

[DamianErtel]

Hello, we use react-svg and have trouble with clip-paths not being applied correctly, turns out clip-path ids get randomized, but same ids are not updated in clip-path style attribute

svg-injector/src/inject-element.ts

Lines 155 to 186 in b7200f5

	elements = svg.querySelectorAll(element + '[id]')
	for (let a = 0, elementsLen = elements.length; a < elementsLen; a++) {
	currentId = elements[a].id
	newId = currentId + '-' + uniqueId()
	// All of the properties that can reference this element type.
	let referencingElements
	Array.prototype.forEach.call(properties, (property: string) => {
	// :NOTE: using a substring match attr selector here to deal with IE
	// "adding extra quotes in url() attrs".
	referencingElements = svg.querySelectorAll(
	'[' + property + '*="' + currentId + '"]'
	)
	for (
	let b = 0, referencingElementLen = referencingElements.length;
	b < referencingElementLen;
	b++
	) {
	const attrValue: string | null =
	referencingElements[b].getAttribute(property)
	if (
	attrValue &&
	!attrValue.match(new RegExp('url\\("?#' + currentId + '"?\\)'))
	) {
	continue
	}
	referencingElements[b].setAttribute(
	property,
	'url(#' + newId + ')'
	)
	}
	})

Thanks in advance!

[tanem]

Hey, thanks for raising this - yea this is a known issue that I haven't had the chance to fix unfortunately:

• xlink href not working react-svg#1024
• renumerateIRIElements for path defs #14

There are workarounds mentioned in those issue threads which may or may not fix your use-case. I'll bump the permanent fix up my priority list in the meantime...