Отзывчивый путь клипа SVG или изображение маски - PullRequest
Новая
       21

Отзывчивый путь клипа SVG или изображение маски

0 голосов
/ 18 октября 2019

Я пытаюсь получить gif с примененным к нему путем SVG-клипа (я также пробовал маскировать изображение, но и здесь не смог получить желаемый результат), чтобы он оставался в пределах области просмотра для всех размеров экрана.

Я пробовал следующие примеры:

Отзывчивый путь клипа со встроенным SVG ; Создание отзывчивого пути клипа SVG / Создание SVG отзывчивым ; Сложный отзывчивый путь клипа SVG ;https://codepen.io/hesselberg/pen/aNgGwQ

Размеры / отзывчивость, кажется, работают, но там ничего не видно - насколько я могу судить, изображение не обрезается. Большинство из этих примеров устанавливают высоту и ширину svg равными 0, что я и сделал, но svg, похоже, действительно не имеет никакой массы.

Вот codepen

HTML с SVG: 

    main {
    	width: 75%;
    	height: 75%;
    }
    
    .clip {
    	width: 100%;
    	height: 100vh;
    }
    
    figure {
    	clip-path: url(#ponyClips);
    	-webkit-clip-path: url(#ponyClips);
    
    }
    <main>
      <figure>
        <img class="clip" src="https://media.giphy.com/media/JLa3Ye8oryiS4/giphy.gif">
    	</figure>
    </main>
    
    <svg id="svg"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" width="0">
    	<defs>
    		<clipPath id="ponyClips" clipPathUnits="objectBoundingBox" transform="scale(0.0009484/0.0010070)" path fill="#282828">
    			<path d="M903.405,47.682C-206.912-268.784-76.332,2061.657,204.29,350.336c31.009-189.105,139.823,226.548,293.805,303.54
    			c153.983,76.991,304.424,84.071,304.424,84.071c-202.768-3.072,322.2-217.426,229.363-184.947
    			c-264.785,92.633-722.499,187.002-234-99c207.079-121.239,171.009,3.416,171.009,3.416S1137.262,114.336,903.405,47.682z"/>
    		</clipPath>
    	</defs>
    </svg>
...