使用SVG框架完全屏蔽div的问题
使用SVG框架完全屏蔽div的问题
提问于 2019-02-19 03:46:32
我正在尝试用一个SVG 'frame‘来屏蔽一个div。尽管绝对定位SVG并将高度/宽度设置为100%，但在底部和右侧边缘仍然可以看到父div的碎片。
html
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-144 2 502 609" style="enable-background:new -144 2
502 609;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css"></style>
<path class="st0" d="M-144,2v608h501.2V2H-144z M354.5,608.5l-
496.2-12.2C-147,201.8-62.3,4.5,112.5,4.5S367.8,205.8,354.5,608.5z"
/>
</svg>
</div>css
html,
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.container {
width: 50%;
height: 50%;
top: 25%;
margin:auto;
background: pink;
position: relative;
}
svg {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.st0{
fill: white;
}https://jsfiddle.net/samseurynck/b2x58ahc/
我希望白色的SVG形状完全遮盖住它后面的粉红色div，而不是像现在这样显示(底部和右侧) div的细条。这些细条似乎随着浏览器的使用而向上扩展。我很好奇，如果我尝试的方法不起作用，使用SVG是否可能做到这一点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-19 04:20:15
我对路径做了一些更改。而viewBox="-144 2 502 609"的路径是501.2而不是502 (在x中)和608.5而不是609 (在y中)。我已经在你的路径中更改了这些数字。
html,
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.container {
width: 50%;
height: 50%;
top: 25%;
margin:auto;
background: pink;
position: relative;
}
svg {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.st0{
fill: white;
}<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-144 2 502 609" style="enable-background:new -144 2 502 609;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
</style>
<path class="st0" d="M-144,2v609h502V2H-144z M354.5,609l-496.2-12.2C-147,201.8-62.3,4.5,112.5,4.5S367.8,205.8,354.5,609z"
/>
</svg>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54754319
复制相关文章
相似问题