响应式SVG剪辑路径或蒙版图像

时间:2019-10-18 10:49:11

标签: svg clip-path responsive-images

我试图获取一个带有SVG剪切路径的gif(我也尝试过蒙版图像,但在这里也无法获得所需的结果),以使其在所有屏幕尺寸的视口范围内。

我尝试了以下示例:

Responsive clip-path with inline SVG; Create responsive SVG clip path / Making SVG <path> responsive; Complex SVG clip-path responsive; https://codepen.io/hesselberg/pen/aNgGwQ

尺寸/响应度似乎正常,但没有什么可看的。据我所知,gif并未被裁剪。这些示例大多数都将svg的高度和宽度设置为0,我已经做到了,但是svg似乎确实没有质量。

这里是codepen

带有SVG的HTML:

    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>

0 个答案:

没有答案