带有剪辑路径、动画比例或宽度的 svg 图像

Question

我在 svg 中有一个被剪辑路径剪辑的图像：

我已经安装了这支笔，每四秒在图像上切换一次缩放 class。宽度有一个过渡，所以我希望图像将其宽度从 42% 动画化到 100%，而剪辑路径保持不变，从而创建图像缩放效果。但是，在 Chrome 中，它似乎刷新时出现故障 - 如果您调整浏览器的大小，您可以看到宽度发生变化，但没有动画效果。

我也试过变换缩放图像：

image { transform: scale3d(1.2,1.2,1); }

虽然它也会缩放剪辑路径，但它会缩放图像并根据需要制作动画。

是否有另一种解决方案来实现这种图像缩放效果，同时保持剪辑路径就位，还是我应该重新考虑一下？

Answer 1

Robert Longson 和 Nenad Vracar 的评论组合帮助解决了这个问题。

我们可以将变换比例属性放到图像上，同时将 clippath 放到组元素上，如代码笔分支所示：

http://codepen.io/mjjwatson/pen/eJpgJx

   <g class="slideshow" data-speed="1000" clip-path="url(#mask-1)">

        <image class="slide" preserveAspectRatio="xMidYMid slice" x="0"  height="100%"  width="42%" xlink:href="http://lorempixel.com/900/500/abstract/1" />

    </g>

带有剪辑路径、动画比例或宽度的 svg 图像

svg image with a clip-path, animating scale or width

css

animation

svg

transition

clip-path