Don't show gradient when linear gradient has href

[av125375]

Don't show gradient when linear gradient has href

` <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="300" height="300">

<rect fill="url(#linearGradient52)" x="10" y="10" width="100" height="100" stroke-width="1" stroke-opacity="1" stroke="#646464"/>

`

[pascal1404]

Hi I have the same problem. I think it is because the href refers to the wrong path. Have you found a solution for this issue? My dirty fix is to load the same SVG as reactComponent with the width and height of 1px and opacity=0 so that the links are available, but I don't like all the extra elements added for this.

[pascal1404]

I found a solution for my problem. react-svgmt adds to elements like linearGradients "-{nr}" to its id-names. Then this fill:url(#linear-gradient-2); does not work anymore in the style-tags, because it must be fill:url(#linear-gradient-2-{nr});.

So the first SVGProxy after loading is <SvgProxy selector="linearGradient" onElementSelected={handleGradients} ></ SvgProxy> an the function handleGradients looks like following and saves the {nr} const handleGradients = (gradients) => { if (typeof gradients.length !== 'undefined') { const output = gradients.map((g, i) => { nr = g.id.substring(g.id.lastIndexOf("-")+1); setNr(g.id.substring(g.id.lastIndexOf("-")+1)); if(g.href.baseVal.length > 0) { var base = g.href.baseVal; g.href.baseVal = base + '-' + nr; } return g; }); } else { nr = gradients.id.substring(gradients.id.lastIndexOf("-")+1); setNr(gradients.id.substring(gradients.id.lastIndexOf("-")+1)); if(gradients.href.baseVal.length > 0) { var base = gradients.href.baseVal; gradients.href.baseVal = base + '-' + nr; } } };

Then I had another SVGProxy <SvgProxy selector="defs > style" onElementSelected={handleStyleElem} ></ SvgProxy>

with the following handlefunction which replaces all urls with the schema from above const handleStyleElem = (svgStyle) => { var styleStr = svgStyle.outerHTML; styleStr = styleStr.replaceAll(/url\(#((\w|-)*)\);/g, 'url(#$1-'+ nr +');'); svgStyle.outerHTML = styleStr; };