2

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

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

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

我也尝试过变换缩放图像：

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

这会缩放图像并根据需要进行动画处理，尽管它也会缩放剪辑路径。

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

4

1 回答 1

4

Robert Longson 和 Nenad Vracar 的评论有助于解决这个问题。

我们可以将变换比例属性放在图像上，同时将剪辑路径放在组元素上，如在这个 codepen fork 上所示：

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>
于 2015-12-12T13:50:31.663 回答