我正在尝试通过SVG和clipPath创建transparent arrow over an image。这是具有解决方案的jsfiddle。
当我尝试在我的div
容器中应用此解决方案时,clipPath
不会剪切并且图像具有白色背景。
jsfiddle
.poi-wrapper{
display: flex;
background: white;
}
.background-img{
width: 110px;
height: 110px;
}
.svg-background, .svg-image {
clip-path: url(#clip-triangle);
}
svg.poi-image {
position: absolute;
height: 110px;
width: 110px;
}
.intro-content{
vertical-align: top;
padding-left: 10px;
padding-right: 5px;
background: white;
height: 100px;
}
<div class="label-wrapper" style="position: absolute; font-family: "Helvetica Neue"; font-weight: 300; color: white; width: 809px; left: 112px;">
<div id="poi-0" class="poi-wrapper poi-intro" style="height: 100px; position: absolute; font-family: "Helvetica Neue"; font-weight: 300; background: white; color: black;">
<div class="background-img">
<svg class="poi-image">
<defs>
<clipPath id="clip-triangle">
<poligon points="0,0 110,0 110,100 30,100 20,110 10,100 0,100 0,0"></poligon>
</clipPath>
</defs>
<rect class="svg-background" width="110px" height="110px" clip-path="url(#clip-triangle)"></rect>
<image class="svg-image" width="110px" height="110px" clip-path="url(#clip-triangle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"></image>
</svg>
</div>
<div class="intro-content">
<span class="poi-header">One step away</span><span class="poi-subheading">1 hour and 28 minutes</span>
<ul class="poi-details">
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
最佳答案
我制作了两个svg
元素,一个包含多边形,另一个包含rect,image,就像在工作示例中一样。
之后,我从实际的工作示例中复制了clipPath代码,现在它可以工作了。
检查以下示例
.poi-wrapper {
display: flex;
background: white;
}
.background-img {
width: 110px;
height: 110px;
}
.svg-background,
.svg-image {
clip-path: url(#clip-triangle);
}
svg.poi-image {
position: absolute;
height: 110px;
width: 110px;
}
.intro-content {
vertical-align: top;
padding-left: 10px;
padding-right: 5px;
background: white;
height: 100px;
}
<div class="label-wrapper" style="position: absolute; font-family: "Helvetica Neue"; font-weight: 300; color: white; width: 809px; left: 112px;">
<div id="poi-0" class="poi-wrapper poi-intro" style="height: 100px; position: absolute; font-family: "Helvetica Neue"; font-weight: 300; background: white; color: black;">
<div class="background-img">
<svg class="poi-image">
<rect class="svg-background" width="110px" height="110px"></rect>
<image class="svg-image" width="110px" height="110px"></image>
</svg>
</div>
<svg id="svg-defs">
<defs>
<clipPath id="clip-triangle">
<polygon points="0,0 110,0 110,100 30,100 20,110 10,100 0,100 0,0"/>
</clipPath>
</defs>
</svg>
</div>
</div>
关于html - svg clipPath不剪辑,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45979240/