-
Notifications
You must be signed in to change notification settings - Fork 73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVGs with gradients and patterns are broken when using symbol strategy #103
Labels
Comments
That's interesting. Thanks for the detailed issue message, I'll take a look soon. |
Looks like it's possible to fix it by moving linear gradients outside symbol elements. It requires some changes in broccoli-symbolizer but I don't have any time for that at the moment. I'll get back to it when I have a chance. |
3 tasks
@astronomersiva I also figured out alternative solution for gradients:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
SVGs with gradients and patterns do not work if they are placed within the symbol. Firefox seems to be the most affected - https://bugzilla.mozilla.org/show_bug.cgi?id=353575, https://stackoverflow.com/questions/12867704/svg-linear-gradient-does-not-work-in-firefox.
When I tried this strategy in one of my apps, there were breakages in other browsers like Chrome and Edge as well. The gradients were displayed differently across each browser.
To fix this, moving the
defs
s blocks out of the symbol seems to do the trick. I found this PR from another repo that deals with svg sprites that can be used for ideas to implement this here. Here is another detailed issue with many relevant discussions.I have also gone ahead and created a repo with a reproduction. If you serve this app, Firefox will display an empty page but Chrome will display an SVG with a radial gradient.
The text was updated successfully, but these errors were encountered: