使用 SVG 框架完美屏蔽 div

Question

我正在尝试用 SVG 'frame' 掩盖 div。尽管绝对定位 SVG 并将 height/width 设置为 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" 路径指向 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>

使用 SVG 框架完美屏蔽 div

Issue perfectly masking a div using an SVG frame

svg

css-position

masking

fluid-layout