[英]Polygon mask SVG image not working for tsparticles in React
[英]Mask SVG with an image
一段时间以来,我一直在修改下面发布的代码,但似乎无法完成对Chrome和Firefox的支持。 我的目标是使图像填充(覆盖)SVG的整个区域。
.trap-container { position: relative; width: 100%; height: 200px; } .trap-container svg { position: absolute; } .trap-content { display: inline-block; position: relative; top: 10%; height: 80%; width: 100%; bottom: 10%; color: white; }
<div class="trap-container"> <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <polygon points="0,0 100,0 100,70 0,100"> </polygon> </svg> <div class="trap-content">Legal </div> </div>
通过首先创建路径,然后添加具有分配给该路径的clip-path
属性的<image>
元素,可以clip-path
<image>
。
.trap-container { position: relative; width: 100%; height: 200px; } .trap-container svg { position: absolute; } .trap-content { display: inline-block; position: relative; top: 10%; height: 80%; width: 100%; bottom: 10%; color: black; }
<div class="trap-container"> <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" class="svg-graphic" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <g> <clipPath id="banner-mask"> <polygon points="0,0 100,0 100,70 0,100" /> </clipPath> </g> <a xlink:href="http://www.stackoverflow.com"> <image clip-path="url(#banner-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/WHnTGPB.jpg?1" /> </a> </svg> <div class="trap-content">Legal</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.