Comments (7)
Thanks for the feedback. Is there any chance you can provide that SVG? Or maybe a simplified version that shows the same effect?
from svg-inject.
The image is inside this repo, name of the file is image.svg
from svg-inject.
This seems to be a problem with ID uniquification. If you turn off ID uniquification, the SVG should display as expected. Here is what you need to put into the <head>
element:
<head>
<script src="svg-inject.js"></script>
<script>
SVGInject.setOptions({
makeIdsUnique: false // do not make ids used within the SVG unique
});
</script>
</head>
I do not understand why it does not work in other browsers, but in any case this appears to be a bug in the library. I will have to take a really close look at this rather complex SVG.
from svg-inject.
The reason for this issue is that currently IDs referenced by attributes in the svg
root element are not handled correctly. The provided SVG file has a filter set in the svg
tag like this:
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" filter="url(#dropShadow)" ...
We call getElementsByTagName('*')
on the svg
element, which returns all descendant elements, but not the svg
element itself. Therefore we have to handle the svg
element separately.
So it has nothing to do with the complexity of the SVG, the same problem could occur in an extremely simple SVG if an id was references by an attribute of the svg
element.
from svg-inject.
@ricardobr001 You can take the SVG offline if it was only uploaded for this issue report.
from svg-inject.
The fix is part of Version 1.2.2 which has just been released
from svg-inject.
It's working now on version 1.2.2, Thanks for the support guys!
from svg-inject.
Related Issues (20)
- SSR Friendly
- Unique ID for embedded SVGs HOT 4
- most basic example isnt working HOT 1
- Twice request HOT 3
- IE WrongDocumentError HOT 3
- Does this work with React? HOT 6
- Accessibility HOT 2
- inline style HOT 1
- Simplify function `makeIdsUnique()`
- Always add `role="img"` to injected SVG
- Consider automatically converting `alt` property to `title` element HOT 1
- Consider `aria-labelledby` and `aria-describedby` when making IDs unique. HOT 1
- Access to XMLHttpRequest has been blocked by CORS policy HOT 1
- makeIdsUnique not working properly
- calling SVGInject multiple times on an img tag when src is updated HOT 1
- Chrome scrollbar issue
- make addStyleToHead optional to easily comply with Content Security Policy
- Partly img effective
- Css styles removed after injection
- how can i use it in typescript?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg-inject.