google-chrome - 动画 SVG 剪辑路径在 Chrome 中无法正常工作

Question

我正在使用 SVGclipPath来剪辑图像。( JSFiddle )

在 Chrome 中，动画被破坏了。仅当其他内容发生更改时（例如在 JSFiddle 中的框之间拖动分隔线时）才重新渲染剪切的图像。

clipPath有没有办法在 SVG更改时“强制”Chrome 重新渲染图像？

HTML：

<figure><img src="http://placehold.it/400x400" alt="" /></figure>
<svg width="0" height="0">
    <clipPath id="slideActiveClipPath" clipPathUnits="objectBoundingBox">
        <polygon points="0 0, 1 0, 1 1, 0 1"></polygon>
    </clipPath>
</svg>

CSS：

@keyframes slide {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

#slideActiveClipPath polygon {
    animation: slide 1s ease-in-out infinite;
}

figure {
    -webkit-clip-path: url(#slideActiveClipPath);
    margin: 0;
    padding: 0;
}