【发布时间】：2016-03-18 08:20:34
【问题描述】：
我有一张被 svg 中的剪辑路径剪辑的图像：
http://codepen.io/mjjwatson/pen/GopNaj
我已经安装了这支笔，每四秒钟在图像上切换一个缩放类。宽度上有一个过渡，因此我希望图像将其宽度从 42% 设置为 100%，而剪辑路径保持不变，从而创建图像缩放效果。但是，在 Chrome 中，它似乎会出现刷新故障 - 如果您调整浏览器的大小，您可以看到宽度发生变化，但没有动画效果。
我也尝试过变换缩放图像：
image { transform: scale3d(1.2,1.2,1); }
这会缩放图像并根据需要制作动画，尽管它也会缩放剪辑路径。
是否有另一种解决方案可以在保持剪辑路径不变的同时实现这种图像缩放效果，还是我应该重新考虑？
【问题讨论】：
-
你想创建类似codepen.io/anon/pen/RrWKbR的东西吗？
-
您可以将剪辑路径移动到父
<g>元素，但如果您这样做，Chrome 似乎无法正确渲染动画。 -
@NenadVracar 不，我不是，因为这也会为剪辑路径设置动画。目的是为图像设置动画，而不是为剪辑路径设置动画。
-
也就是说，实际上是@RobertLongson 和 Nenad 回答的组合，将 scale 属性放在图像上，但将 clip-path 放在组上！惊人的。我会回答这个问题...
标签： css animation svg transition clip-path