Gradients / Masks do not work when exported from illustrator using uniqifyIDs
katoha opened this issue · comments
If you export an svg from illustrator with either the internal CSS or inline style options then the references to those styles are broken as they do not get updated with the id hash.
I was not able to get the internal CSS styles to update with the hash id as it appears this is a read only part of the SVG, however I was able to get the inline style version to work with the below code change. I have added an example svg file that if you drop onto a web browser you will see is a green square with rounder corners. If you load this into react-inlinesvg nothing will appear.
code change to fix this is on 2 lines.
// index.tsx
line 165
from
`const match = a.value.match(/^url\((#[^)]+)/);`
to
`var match = a.value.match(/url\((.*?)\)/);`
so that it can match all the existing url reference but also url references without a hash #
line 168
from
`a.value = `url(${baseURL}${match[1]}__${this.hash})`;`
to
`a.value = a.value.replace(match[0], `url(${baseURL}${match[1]}__${this.hash})`);`
This allows you to target the individual style element with the style attribute of svg elements for example <svg style="opacity:20; fill: url(radial-gradient-1)"> will be replaced with <svg style="opacity:20; fill: url((baseUrl)radial-gradient-1__(hash))"> leaving the other attributes alone.
Hey,
I've updated the attributes matches in fea6d5f and released in v1.2.0.
About the internal CSS export, can you provide an example?
Thanks