当 <use> 过滤形状时 - 过滤器在 Chrome 中消失

Question

我正在尝试创建在 SVG 中应用了过滤器的形状的“镜像”效果。非常简单的镜像 - 只需将其与原始形状保持一定距离并将其翻转即可。原始形状应用了“发光”滤镜。

在不同的浏览器中渲染时：

• Edge（非 Chromium）渲染完全符合预期。
• Chrome 不会渲染应用过滤器的镜像形状 - 只会渲染原始路径形状。
• Firefox 甚至不呈现过滤器。呃。

因此，鉴于 Edge 很快将迁移到 Chromium，我想保留应用了滤镜的镜像形状的这种影响。这就是我正在做的事情 - 我可以做任何不同的事情来让 Edge 出现在 Chrome 中吗？

<svg name="glow only" x="100" y="50" overflow="visible" fill="green" stroke="orange" stroke-width="3.25">
    <defs>
        <filter id="glow" color-interpolation-filters="sRGB" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox">
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 1 0 0 0 100 0" result="glowColor" />
            <feMorphology operator="dilate" radius="5.5" in="glowColor" result="thickenify" />
            <feGaussianBlur in="thickenify" stdDeviation="2.5" result="glowIt" />
            <feMerge>
                <feMergeNode in="glowIt" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
    <use id="mirroredContent" xlink:href="#contentForMirroringWithFilter" transform="matrix(1,0,0,-1,4.89842541528951E-16,155.25)" />
    <g id="contentForMirroringWithFilter">
        <path d="M0,0L60,0L72,12L72,72L0,72Z" filter="url(#glow)" />
    </g>
</svg>

有谁知道如何在 Chrome 中实现这一点？

---

编辑 1：这开始看起来像是翻转的问题。如果我使用其他转换，例如： <use xlink:href="#contentForMirroringWithFilter" transform="rotate(50)"/> 和 <use xlink:href="#contentForMirroringWithFilter" transform="translate(0, 80)"/>，过滤器被保留。即使我申请了一个积极的scale，它也可以工作，比如 <use xlink:href="#contentForMirroringWithFilter" transform="translate(0, 80) scale(1,1.2)"/>。

但是，一旦我对翻转应用负比例，它就会翻转并且不显示过滤器： <use xlink:href="#contentForMirroringWithFilter" transform="translate(0, 152) scale(1,-1) "/>.

这是一个错误，还是我应该尝试翻转的其他方式？

编辑 2：

• 已在 bugzilla.mozilla.org/show_bug.cgi?id=1577566 上为 Firefox 提交了一个错误。
• Kaiido 在 Chrome 中发现的错误已通过此问题进行了修正：https://bugs.chromium.org/p/chromium/issues/detail?id=595244
• 我仍在寻找一种解决方法，让我可以应用过滤器并随后使用 <use/>'d 形状（应用过滤器），例如设置不同的转换、不透明度等。

Answer 1

另一种解决方案是将路径和镜像放在同一个 g 元素内，并将过滤器应用于<g>，如下所示：

<svg name="glow only" x="100" y="50" overflow="visible" fill="green" stroke="orange" stroke-width="3.25">
    <defs>
        <filter id="glow" color-interpolation-filters="sRGB" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox">
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 1 0 0 0 100 0" result="glowColor" />
            <feMorphology operator="dilate" radius="5.5" in="glowColor" result="thickenify" />
            <feGaussianBlur in="thickenify" stdDeviation="2.5" result="glowIt" />
            <feMerge>
                <feMergeNode in="glowIt" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
  <g filter="url(#glow)">
    <use id="mirroredContent" xlink:href="#contentForMirroringWithFilter" transform="matrix(1,0,0,-1,4.89842541528951E-16,155.25)" />
    <g id="contentForMirroringWithFilter">
        <path d="M0,0L60,0L72,12L72,72L0,72Z"  />
    </g>
  </g>
</svg>