响应性地在父级中定位SVG

Question

我有一个SVG覆盖，这是一个形状与一个孔冲压出来。有没有什么办法我可以设置它，使覆盖有效地固定在右下角，并保持圆圈在比例相同的位置，同时扩展SVG的其余部分，以填充容器的剩余区域？

我已经设法让SVG (似乎)停留在右下角，但我不知道如何让它填充容器的其余部分？我需要在不扭曲圆圈形状的情况下做到这一点。

codepen：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>

​

Answer 2

这是我会怎么做的。我将提供分步指导，以便更容易地遵循“魔术”。:)

我们的想法是使用一个简单的正方形SVG，viewBox的宽度和高度为100x100。然后我们可以在viewBox的右下角放置将成为我们未来的洞的圆。

​

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;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="#015668"/>
    <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
  </svg>
</div>

​

然后，我们使用preserveAspectRatio="xMaxYMax meet"告诉渲染器，我们希望在右下角显示SVG内容。

​

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;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <rect x="0" y="0" width="100" height="100" fill="#015668"/>
    <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
  </svg>
</div>

​

下一步是将矩形加宽，并从viewBox的左侧开始，以便填充位于SVG左侧的视口区域。我们将通过让它从x="-900"开始并成为width="1000"来实现。这意味着它比(100宽)的viewBox向左延伸了9倍。这应该会使它的宽度足够容纳周围最巨大的显示器。

我们也将在垂直方向上做同样的事情。以防视口变得又高又瘦。如果您调整窗口大小，使其宽度变窄，就会发生这种情况。

​

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;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <rect x="-900" y="-900" width="1000" height="1000" fill="#015668"/>
    <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
  </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;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <defs>
      <mask id="mymask">
        <rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
        <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
      </mask>
    </defs>
    <rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
  </svg>
</div>

​

做最后的测试。让我们把"box“做得更大，以检查它是否具有正确的响应性。这次我们会把它调到400px高。尝试调整浏览器windo的大小以检查响应性。

​

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

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

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <defs>
      <mask id="mymask">
        <rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
        <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
      </mask>
    </defs>
    <rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
  </svg>
</div>

​