New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 712328 link

Starred by 3 users

Issue metadata

Status: WontFix
Owner: ----
Closed: May 2017
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-05-08
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Dynamically loaded SVG (via ajax) breaks

Project Member Reported by ericrk@chromium.org, Apr 17 2017

Issue description

Split 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
 

Comment 1 by ericrk@chromium.org, Apr 17 2017

Cc: pdr@chromium.org
pdr@, any Idea who should look at this?

Comment 2 by pdr@chromium.org, Apr 17 2017

Labels: Needs-Feedback
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.
Labels: Hotlist-ConOps

Comment 4 by pdr@chromium.org, Apr 18 2017

Status: WontFix (was: Unconfirmed)
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.
Cc: jainabhi...@chromium.org
Labels: BugSource-Chromium PaintTeamTriaged-20170419
NextAction: 2017-05-01
Status: Unconfirmed (was: WontFix)
jainabhishek@, can you reach out for feedback through Con-Ops somehow? If not, we will have to close this as not actionable.
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.
NextAction: 2017-05-08
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.

Comment 8 by pdr@chromium.org, 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?
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.
Status: WontFix (was: Unconfirmed)
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