使用SVG帧完美地屏蔽div

Question

我试图用SVG'框架'掩盖一个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是否可行。

Answer 1

我对路径做了一些改动。而viewBox="-144 2 502 609"the路径转到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>