2015-12-12 3 views
0

Я изображение обрезается по пути клипа в качестве SVG:SVG изображения с зажимом-пути, оживляющей масштабе или ширина

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

Я оснащенном эту ручку для переключения увеличенного класса на изображение каждые четыре секунды. Там есть переход по ширине, поэтому я ожидаю, что изображение оживит его ширину с 42% до 100%, в то время как клип-путь остается тем же, создавая эффект масштабирования изображения. Тем не менее, в Chrome, похоже, сбой обновления - если вы измените размер браузера, вы увидите изменение ширины, но не анимацию.

Я также попытался преобразовать масштабирование изображения:

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

Это масштабирует изображение и делает анимацию по желанию, хотя она также масштабирует клип-путь.

Есть ли еще одно решение для достижения этого эффекта масштабирования изображения при сохранении пути клипа на месте или я должен переосмыслить вещи?

+0

Вы пытаетесь создать что-то вроде этого http://codepen.io/anon/pen/RrWKbR? –

+0

Вы можете переместить клип-путь к родительскому элементу '', но Chrome, похоже, не будет правильно отображать анимацию, если вы это сделаете. –

+0

@NenadVracar нет, я не так, поскольку это оживляет клип-путь. Цель состоит в том, чтобы анимировать изображение, но не клип-путь. – mjjwatson

ответ

1

Комбинация комментариев Роберта Лонгсона и Ненада 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>