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

Question

我正在使用SVG clipPath剪辑图片。 （JSFiddle）

在Chrome中，动画已损坏。剪切的图像仅在其他内容发生变化时重新渲染（例如，在JSFiddle中的框之间拖动分隔符时）。

当SVG clipPath发生变化时，有没有办法“强制”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;
}