Выдача идеальной маскировки div с использованием фрейма SVG - PullRequest
Новая
       14

Выдача идеальной маскировки div с использованием фрейма SVG

0 голосов
/ 18 февраля 2019

Я пытаюсь замаскировать div с помощью SVG 'frame'.Несмотря на абсолютное позиционирование SVG и установку высоты / ширины на 100%, по-прежнему видны осколки родительского элемента, видимые вокруг нижнего и правого краев.

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 Ответ

0 голосов
/ 18 февраля 2019

Я сделал несколько изменений в пути.В то время как viewBox="-144 2 502 609" путь идет к 501,2 вместо 502 (в х) и к 608,5 вместо 609 (в у).Я изменил эти цифры на вашем пути. 

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>
...