SVG + CSS；flexbox环境中的Clippath
SVG + CSS；flexbox环境中的Clippath
提问于 2018-06-14 12:51:58
我想这对你们中的一些人来说可能很简单。我只想用SVG图形掩盖一个图像。
我创建了一个包含clipPath元素的SVG：
<svg id="heart-path-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 50 50" xml:space="preserve">
<clipPath id="heart-path" clipPathUnits="objectBoundingBox">
<path d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z">
</path>
</clipPath>
</svg>
还有一个SVG，里面有图像：
<svg id="heart-image-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 50 50" xml:space="preserve">
<image class="clip-image" xlink:href="https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=2250&q=80"></image>
</svg>
我基本上在CSS中说，这个图像应该用SVG clipPath元素剪裁。
.clip-image{
width: 100%;
height: 100%;
clip-path: url(#heart-path);
}
但它做不到。
我发明了一把小提琴来表示什么都没有被剪掉。
我做错什么了？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-15 06:36:00
当您指定objectBoundingBox坐标时，corrdinate必须介于0到1之间，您的剪辑路径坐标上升到大约50，所以您的剪辑路径太大了。
简单的修复方法是使用transform将路径缩小到正确的大小。
body, html{
height: 100%;
}
svg{
position: absolute;
width: 100%;
height: 100%;
}
.clip-image{
width: 100%;
height: 100%;
clip-path: url(#heart-path);
}
.wrapper{
position: relative;
margin: 0 auto;
height: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
}
section{
position: relative;
background: red;
flex: 1;
width: 100%;
}<div class="wrapper">
<section></section>
<section>
<svg x="0px" y="0px">
<clipPath id="heart-path" clipPathUnits="objectBoundingBox">
<path d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"
transform="scale(0.02,0.02)"></path>
</clipPath>
</svg>
<svg id="heart-image-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 50 50" xml:space="preserve">
<image class="clip-image" xlink:href="https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=2250&q=80"></image>
</svg>
</section>
<section></section>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50858020
复制相关文章
相似问题
腾讯云开发者
