Question

我在svg中用剪辑路径剪切图像：

我已经装好了这支笔，每四秒钟在图像上切换一个缩放的类。宽度有一个过渡，所以我希望图像的宽度从42％变为100％，而剪辑路径保持不变，从而产生图像缩放效果。但是，在Chrome中，它似乎会出现刷新问题 - 如果您调整浏览器大小，则可以看到宽度更改，但不会显示动画。

我也尝试过缩放图像：

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

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

是否有其他解决方案可以在保持剪辑路径到位的同时实现此图像缩放效果，还是应该重新思考？

Answer 1

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

我们可以将transform scale属性放到图像上，同时将clippath放到group元素上，如此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>

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

1 个答案: