Within my AngularJS web application, I am dynamically loading various SVGs and adjusting the opacity of their layers. Some paths within these SVGs have fill pattern properties like this:
<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"/>
Initially, everything functions as expected. However, under certain circumstances, these fills seem to vanish:
-
Scenario 1: If I switch to a different SVG and then return.
Outcome:: The fill remains visible.
-
Scenario 2: When I adjust the opacity of the element with the fill.
Outcome:: The fill is still present.
-
Scenario 3: If I both switch to another SVG and modify the opacity of the element with the fill.
Outcome:: The fill disappears.
-
Although the styles appear to be correctly applied in the code, there is no visible fill. This behavior occurs primarily in Chrome and slightly differently in Safari. Firefox does not exhibit this issue.
I attempted manually changing the fill of the element in the browser to rule out caching, but it did not resolve the issue. My theory is that the # reference to an inline pattern defined in <defs> may not have loaded yet via AJAX, though the cached CSS rule persists.
It may be worth noting that both SVGs I switch between share the same <defs> and CSS styling. Could the duplicate definition of the pattern be causing complications?