动态加载 SVG 时，SVG fill="url(#foo)" 消失答案

【问题标题】：SVG fill="url(#foo)" disappears when SVGs are loaded dynamically动态加载 SVG 时，SVG fill="url(#foo)" 消失
【发布时间】：2021-10-18 19:44:11
【问题描述】：

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

这一切起初都很好用 - 但是在某些情况下，这些 # 填充会消失：

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

结果：： # 填充仍然可见。

条件 2：如果我要使用 # 填充来更改元素的不透明度。

结果：： # 填充仍然可见。

条件 3：如果我同时切换到另一个 SVG 并使用 # 填充更改元素的不透明度。

结果：： # 填充变得不可见。

这意味着所有样式似乎仍然在代码中正常应用 - 但看不到实际可见的填充。据我所知，这种行为在 Chrome 中存在，在 Safari 中略有不同。 Firefox 似乎免疫了。

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

如果有帮助的话，我在两者之间切换的两个 SVG 都应用了相同的 <defs> 和 CSS 样式。定义模式的双重情况是否会导致问题？

【问题讨论】：

可能是浏览器错误，您是否尝试将它们报告给相应的错误跟踪器？
@RobertLongson 我找到了一个解决方法，它会建议这个（有问题的答案），当我完成工作时会向 Chromium 等报告。
@jmcgrory，Chromium 开发者仍在等待您的反馈crbug.com/712328

标签： javascript css ajax svg fill

【解决方案1】：

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

要解决这个问题，请将您的不透明度 css 应用于具有填充的元素周围的包含元素：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，你没有加载多个具有相同/重复 id 值的 SVG，因为那是无效的。
不——我在不同的 SVG 之间切换，它们的类/组共享相同的 css 样式表。

【解决方案2】：

我有多个 svg 元素，问题是所有 pattern 标记的 ID 相同。所以，为每个svg 元素的pattern 标签使用不同的id="" 解决了我在动态重新加载时fill="url()" 消失的问题...

【讨论】：