html - 响应式地将 SVG 放置在父级中

Question

我有一个 SVG 叠加层，它是一个带有冲孔的形状。无论如何我可以设置它以便覆盖有效地固定到右下角并使圆按比例保持在相同位置，同时扩展 SVG 的其余部分以填充容器的剩余区域？

我已经设法让 SVG(看起来)留在右下角，但我不知道如何让它填满容器的其余部分？我需要在不明显扭曲圆形的情况下执行此操作。

代码笔:https://codepen.io/emilychews/pen/KQmZEd

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
position: absolute;
bottom: 0; 
right: 0;
}

<div id="box">
    <svg id="overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.71 170.5"><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2-2"><path d="M0,0V170.5H232.71V0ZM187.37,148.19a23,23,0,1,1,23-23h0A23,23,0,0,1,187.37,148.19Z" transform="translate(0 0)" fill="#015668"/></g></g></svg>
</div>

Answer 1

我会考虑另一个想法，即使用蒙版创建孔，您可以轻松控制圆的位置和大小。然后诀窍是让整个 svg 以大宽度/高度溢出以始终覆盖 div 并保持相同大小的圆圈:

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width:1000px;
  height:1000px;
}

<div id="box">
  <svg  id="overlay" viewbox="0 0 400 400" >
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole -->
      <circle r="20" cx="370" cy="370" fill="black"/>
    </mask>
  </defs>

  <rect x=0 y=0 width=400 height=400 mask="url(#hole)" fill="green" />
    
</svg>
</div>

如果你想让圆在宽度变化时调整大小，你可以试试这个:

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width:100%;
}

<div id="box">
  <svg  id="overlay" viewbox="0 0 400 10000" >
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole -->
      <circle r="80" cx="300" cy="9900" fill="black"/>
    </mask>
  </defs>

  <rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="green" />
    
</svg>
</div>

---

并且您可以轻松获得上一个问题中所需的不透明度:

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width:100%;
}

<div id="box">
  <svg  id="overlay" viewbox="0 0 400 10000" >
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole -->
      <circle r="80" cx="300" cy="9900" fill="black"/>
    </mask>
  </defs>

  <rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="rgba(0,0,255,0.5)" />
    
</svg>
</div>