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"路径到达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

1 个答案: