我有一个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>
答案 0 :(得分：0)
我会考虑使用蒙版创建孔的另一个想法，您可以轻松控制圆的位置和大小。然后诀窍是让整个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>
答案 1 :(得分：0)
这是我怎么做的。我将提供逐步说明，以便更轻松地遵循＆＃34;魔法＆＃34;。 ：）
我们的想法是使用一个宽度为viewBox宽度和高度为100x100的简单方形SVG。然后我们可以在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扩展到左侧9X。这应该使它足够宽，以满足周围最嘈杂的显示器。
我们也会在垂直方向做同样的事情。以防万一视口变得高大瘦弱。如果您调整窗口大小以使其宽度较窄，则会发生这种情况。
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>
进行最终测试。让我们来制作＆＃34;框＆＃34;更大，以检查它是否正确响应。这次我们将它提高400px。尝试调整浏览器窗口的大小以检查响应性。
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>