Issue metadata
Sign in to add a comment
|
Dynamically loaded SVG (via ajax) breaks |
||||||||||||||||||||||
Issue descriptionSplit from bug 710208 - Original text: If you dynamically load an inline SVG via ajax (in my case using Angular) it breaks any elements within using the fill: url(#) property if you also alter the opacity of the element. Works fine in Firefox. Doesn't work in Safari. Have not tested in IE/Opera. [Stackoverflow] From stack overflow issue here: http://stackoverflow.com/questions/43140737/svg-fill-urlfoo-disappears-when-svgs-are-loaded-dynamically
,
Apr 17 2017
I don't think there's enough information in the original bug to make progress on this. I will ask the user on stackoverflow if they can add more information.
,
Apr 18 2017
,
Apr 18 2017
My comment on stackoverflow asking for more information got deleted (it didn't answer the question). I don't think we will get more information on this bug. I suspect there's a real issue here but without a testcase I think we should close this as wontfix.
,
Apr 19 2017
jainabhishek@, can you reach out for feedback through Con-Ops somehow? If not, we will have to close this as not actionable.
,
Apr 20 2017
pdr@ I am the stack overflow user who raised this. The issue appears when you apply an opacity to an inline SVG element (in my case a path) using the fill="url(#foo)" method of applying pattern fills (with all of the <def> etc. inline also).
This alone causes no issue- however within my app I am loading different SVGs inline dynamically dependent on user input (it's an online configurator) using AngularJS.
ie: <div ng-include="{{ inlineSVGPath }}"></div>
As soon as you start switching between SVGs using this and also alter the opacity of the fill it simply disappears (with all the styling saying it still exists).
I can expand on any questions if necessary.
,
Apr 20 2017
Thanks very much for getting back to us. Can you please give us an example inline SVG doc to put inside the div, with the opacity setting present and a comment indicating what to change to make it work? i.e. "Remove this opacity and it works". Does the same problem replicate if you manually put the SVG content inside the div. That is, if you recreate the page as it would be after AngularJS has done it's DOM manipulation? We can't make progress without a test case that can be seen to fail.
,
Apr 20 2017
I tried to recreate this scenario but it seems to work: http://jsbin.com/duseneq/quiet Can you create a jsbin that re-creates the issue?
,
Apr 20 2017
You guys are quick. I've looked at your example pdr@ and it seems to be doing largely what I was doing. I've recreated a similar example locally- however have had the same result as you with the SVG functioning perfectly! Here's a git repo of my example with no issue present: https://github.com/jmcgrory/bug I will update tomorrow if/when I can recreate the bug (I have some old versions of the app at work which the bug is present in). The SVGs I was editing when there were issues were much more complex so maybe there were more factors than opacity and dynamic loading, I'll try and hunt them down for you.
,
May 8 2017
I'm closing this because maybe it's fixed or maybe the issue is outside of Chrome. If any more information comes to light feel free to re-open the bug. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by ericrk@chromium.org
, Apr 17 2017