svgの中心をノックアウトして透明にするSVGマスクまたはCSSスタイル

Dec 18 2020

私は基本的に丸いエッジと各エッジの角に境界線があるボックスであるSVGを持っています：

<div class="container">
</div>
<svg width="258" height="258" viewBox="0 0 258 258" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M257 211.489L257 245C257 251.627 251.627 257 245 257L211.489 257" stroke="white" stroke-width="2" />
  <path d="M211.489 0.999998L245 0.999999C251.627 1 257 6.37258 257 13L257 46.5111" stroke="white" stroke-width="2" />
  <path d="M46.5111 257L13 257C6.37258 257 1 251.627 1 245L1.00001 211.489" stroke="white" stroke-width="2" />
  <path d="M1 46.5111V13C1 6.37258 6.37258 1 13 1H46.5111" stroke="white" stroke-width="2" />
</svg>

これは、色付きの背景を持つコンテナdivの上に配置されます。

body{background: white}
.container {
  margin-top: 70px;
  height: 400px;
  margin: 0 auto;
  background-color: black;
  opacity: 0.55;
}

svg {
  position: absolute;
  top: 50px;
  left: 300px;
}

SVGの中心（白い縁の境界内の中心領域全体）を透明にしたい。したがって、この例では、体の白い背景が表示されます。

これがそのCodePenです： https://codepen.io/lance-p/pen/mdrwyyN

私はこれを達成するためにマスクを使用できると言われましたが、それを機能させることができませんでした。（マスクの有無にかかわらず）どんな提案もいただければ幸いです！

回答

3 enxaneta Dec 18 2020 at 17:23

これは、.container背景の代わりに非常に広い影を使用している代替ソリューションです。

また、svgを簡略化しましたが、ここにコードを保持できます。

*{margin:0;padding:0}

body {
  background: white;
}
.container {
  margin-top: 70px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0.55;
}

#hole {/*I want the hole to be slightly smaller than the svg element hence the calc*/
  width:calc(258px - 8px);
  height:calc(258px - 8px);
  border-radius:20px;
  position: relative;
  top: calc(50px + 4px);
  left: calc(300px + 4px);
  background:transparent;
  box-shadow:0 0 0 200vmax #000;
}

svg{
  width:258px;
  height:258px;
  position: absolute;
  top: 50px;
  left: 300px;
}

<div class="container">
  <div id="hole"></div>
</div>

  <svg width="258" height="258" viewBox="0 0 258 258" xmlns="http://www.w3.org/2000/svg">

    <rect x="1" y="1" width="256" height="256" rx="20" id="r" stroke="white" stroke-width="2" stroke-dasharray="80 168" stroke-dashoffset="58" fill="none" />

  </svg>

@alexandr_TTはコメントしています：

どういうわけか、説明の中で白い角を配置するための主な解決策を強調することができます。stroke-dasharray= "80 168" stroke-dashoffset = "58"

まず、角が丸い長方形の全長を知る必要があります。let l = r.getTotalLength();。この値を4で割ると、ストロークとギャップの合計がわかりlet stroke_gap = l/4;ます。次に、たとえば、ストロークに1つの値を選択しますlet stroke = 80。使用するギャップについてはlet gap = stroke_gap - stroke;、数値を四捨五入しています。多分私はすべきではありません。これは、私のような何か与えているstroke-dasharray="80 168"あなたが必要となりますコーナーから20単位（RX =「20」）の距離（X =「1」、Y =「1」）で開始されますあなたが唯一のこの最初のストロークを使用している場合をstroke-dashoffsetしますストロークをオフセットし、角を曲がらせます。

パスのコーナー部分の長さを計算できます。半径= 20（rx = 20）の円の周囲の1/4の長さlet corner = 2 * Math.PI * radius/4;です。ストロークダッシュオフセットの値は次のようになります。let sdo = stroke/2 + corner/2