javascript - SVG fill="url(#foo)" disappears when SVGs are loaded dynamically - Stack Overflow

I am loading different SVGs dynamically within a web application built in AngularJS, I am also altering the opacity of layers within the SVGs. These SVGs have some paths with the fill pattern property as such

<defs>
  <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272">
    <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/>
  </pattern>
</defs>

<rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>

This all works great at first- however under some conditions these # fills simply disappear:

-

Condition 1: If I were to switch to another SVG and back.

Result:: The # fill is still visible.

-

Condition 2: If I were to alter the opacity of the element with the # fill.

Result:: The # fill is still visible.

-

Condition 3: If I were to both switch to another SVG & alter the opacity of the element with the # fill.

Result:: The # fill bees invisible.

-

This is to mean the styles all appear to still be applied normally in the code- but there is no actual visible fill to be seen. This behaviour exists as far as I can see in Chrome and slightly differently in Safari. Firefox seems to be immune.

I've tried manually flicking the element to another fill and back in the browser to see if perhaps something had cached, no luck. I still think this may somehow be the case, with how the # refers to an inline pattern defined in the <defs> which may not have been loaded yet by the AJAX but the cached CSS rule still floating around.

If it helps matters, both SVGs that I am switching between both have the same <defs> and CSS styling applied. Is perhaps the double case of the defined pattern causing an issue?

I am loading different SVGs dynamically within a web application built in AngularJS, I am also altering the opacity of layers within the SVGs. These SVGs have some paths with the fill pattern property as such

<defs>
  <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272">
    <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/>
  </pattern>
</defs>

<rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>

This all works great at first- however under some conditions these # fills simply disappear:

-

Condition 1: If I were to switch to another SVG and back.

Result:: The # fill is still visible.

-

Condition 2: If I were to alter the opacity of the element with the # fill.

Result:: The # fill is still visible.

-

Condition 3: If I were to both switch to another SVG & alter the opacity of the element with the # fill.

Result:: The # fill bees invisible.

-

This is to mean the styles all appear to still be applied normally in the code- but there is no actual visible fill to be seen. This behaviour exists as far as I can see in Chrome and slightly differently in Safari. Firefox seems to be immune.

I've tried manually flicking the element to another fill and back in the browser to see if perhaps something had cached, no luck. I still think this may somehow be the case, with how the # refers to an inline pattern defined in the <defs> which may not have been loaded yet by the AJAX but the cached CSS rule still floating around.

If it helps matters, both SVGs that I am switching between both have the same <defs> and CSS styling applied. Is perhaps the double case of the defined pattern causing an issue?

• javascript
• css
• ajax
• svg
• fill

Share Improve this question Follow edited Apr 8, 2017 at 21:05 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Mar 31, 2017 at 12:30 jmcgroryjmcgrory 84399 silver badges1919 bronze badges 3

• Presumably browser bugs, have you tried reporting them to the appropriate bugtrackers? – Robert Longson Commented Mar 31, 2017 at 13:06
• @RobertLongson I have found a workaround which would suggest this (answered in question), will report to Chromium etc. when I finish work. – jmcgrory Commented Mar 31, 2017 at 13:17
• @jmcgrory, chromium developers are still waiting for your feedback crbug./712328 – woxxom Commented Apr 19, 2017 at 15:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I had multiple svg elements and problem was the same ID of all pattern tags. So, using different id="" for the pattern tag of each svg element solved my problem with disappearing fill="url()" on dynamic reload...

After some investigation this appears to be an issue with the browsers (Chrome/Safari possibly others) not being able to keep up with rendering fill: url(#) and opacity for the same element at the same time, at least in cases of multiple/dynamically loaded SVGs.

To solve this, apply your opacity css to a containing element around the element that has the fill: url(#), example below:

<defs>
  <pattern id="glass-floral" patternUnits="userSpaceOnUse" width="184" height="272">
    <image xlink:href="../img/glass-floral.png" x="0" y="0" width="184" height="272"/>
  </pattern>
</defs>
<style>.opacity-class { opacity: 0.33; }</style>
<g class="opacity-class">
  <rect x="98.3" y="85.5" fill="url(#glass-floral)" width="365" height="318.8"/>
</g>

This allows the browser to do both independently and not ruin your pretty pictures.