用夾子路徑，動畫規模或寬度

我已圖像通過在SVG剪輯路徑截取SVG圖像每四秒拍攝一張圖像。寬度有一個過渡，所以我希望圖像在寬度從42％到100％的同時剪輯路徑保持不變，從而創建圖像縮放效果。但是，在Chrome中，它似乎會令人耳目一新 - 如果您調整瀏覽器的大小，您可以看到寬度發生變化，但不會變成動畫。用夾子路徑，動畫規模或寬度

我也試着變換縮放圖像：

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

此縮放圖像和動畫不會如所期望，儘管它也縮放夾路徑。

是否有另一種解決方案來實現這種圖像縮放效果，同時保持剪輯路徑到位，還是我應該重新考慮一些事情？

來源

2015-12-12 mjjwatson

你想創建這樣的事情http://codepen.io/anon/pen/RrWKbR？ –

您可以將剪輯路徑移到父元素「」元素，但如果您這樣做，Chrome似乎不會正確呈現動畫。 –

@NenadVracar不，我不是，因爲它也是動畫剪輯路徑。目的是動畫化圖像，但不是剪輯路徑。 – mjjwatson

Robert Longson和Nenad Vracar的評論結合了這個解決方案。

我們可以把改造規模財產上的形象，同時把clippath到組元素，在此codepen叉子看到：

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-12 13:50:31 mjjwatson

用夾子路徑，動畫規模或寬度

回答

相關問題