Question

我在AngularJS内置的Web应用程序中动态加载不同的SVG，我也在改变SVG中层的不透明度。这些SVG有一些具有填充模式属性的路径

<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"/>

这一切都很有效 - 但是在某些情况下，这些#fills会消失：

-

条件1 ：如果我要切换到另一个SVG并返回。

结果：： #fill仍然可见。

-

条件2 ：如果我要使用＃fill改变元素的不透明度。

结果：： #fill仍然可见。

-

条件3 ：如果我要切换到另一个SVG＆amp;用＃fill改变元素的不透明度。

结果：： #fill变得不可见。

-

这意味着所有样式似乎仍然在代码中正常应用 - 但是没有可见的实际可见填充。就我在Chrome中看到的而言，此行为存在，而在Safari中则略有不同。 Firefox似乎没有免疫力。

我尝试手动将元素移动到另一个填充并返回浏览器，看看是否有某些内容已缓存，没有运气。我仍然认为这可能是某种情况，＃指的是<defs>中定义的内联模式，它可能尚未被AJAX加载，但缓存的CSS规则仍在浮动。

如果它有用，那么我在两者之间切换的两个SVG都应用了相同的<defs>和CSS样式。或许导致问题的定义模式的双重情况？

Answer 1

经过一些调查后，这似乎是浏览器（Chrome / Safari可能是其他人）无法跟上渲染填充的问题：url（＃）和同时对同一元素的不透明度，至少在多个/动态加载的SVG的情况下。

要解决此问题，请将不透明度css应用于包含fill：url（＃）的元素周围的包含元素，例如：

<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>

这允许浏览器独立完成这两项操作，而不会破坏你漂亮的图片。

SVG fill =＆＃34; url（#foo）＆＃34; SVG动态加载时消失

1 个答案: