拉伸SVG以适应其父级的100%高度和宽度

Question

(已解决 - 通过codepen链接查看解决方案)我正在尝试使用SVG图像作为背景,它将始终延伸到其父div的100%.已经尝试过:

• 用作CSS背景图像并设置背景大小:100%100%.
• 将绝对值设为父div并设置高度:100%.
• preserveAspectRatio = "xMaxYMax".
• 即使我手动更改viewBox它也不起作用.
• 尝试了我在这里找到的所有相关问题 - Stretch SVG背景图片？,自动将SVG缩放到其父级,Fit/Stretch SVG到div背景而不进行reescaling

为了得到更好的理解我想要什么,请访问以下链接: http://185.127.16.178/~amen/%D7%90%D7%95%D7%91%D7%97%D7%A0%D7%AA- %D7%9C%D7%90%D7%97%D7%A8%D7%95%D7%A0%D7%94 /
在该绿色泡沫,文本的长度可以变化,所以我需要的SVG时更多的文本伸展添加,div正在增长.

我还创造了一支小笔 -

.svg-container {
  height: 400px;
  width: 200px;
  border: 1px solid red;
  position: relative;
}

#small_bubble {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.cls-1 {
  fill: transparent;
  stroke: green;
  stroke-miterlimit: 3;
  stroke-width: 3px;
}

.e-poa {
  position: absolute;
}

e-por {
  position: relative;
}

<div class="svg-container">
  <svg id="small_bubble" class="e-poa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.92 272.85" preserveAspectRatio="xMaxYMax">
      <path class="cls-1" preserveAspectRatio="xMaxYMax" d="M301.52,1.57,8.37,19.53A7.87,7.87,0,0,0,1.5,27.34V214.76a7.89,7.89,0,0,0,7.12,7.85l46.67,4.53-7.14,42.78,63-37.35,190.58,18.51a7.88,7.88,0,0,0,8.65-7.85V9.38A7.88,7.88,0,0,0,301.52,1.57Z"/>
     </svg>
</div>

解决方案可以在这里看到(解决方法 - @Furkan Poyraz):https://codepen.io/ncamaa/pen/JZzeQM

Answer 1

如果您对另一种选择开放,您可以使用纯CSS创建形状.它不会像SVG那样整洁,但它会响应:

* {
 box-sizing:border-box;
}

.box {
 margin:40px;
 padding:0 10px;
 max-width:200px;
 display:inline-block;
 vertical-align:top;
 border-right:2px solid green;
 border-left:2px solid green;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:calc(100% - 40px);
  height:50px;
  border:2px solid green;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  transform:skewY(-5deg);
  transform-origin:left bottom;
}
.box .b {
  position:absolute;
  left:-2px;
  right:-2px;
  top:calc(100% - 40px);
  height:50px;
  border:2px solid green;
  border-top:0;
  border-radius:0 0 5px 5px;
  transform:skewY(5deg);
  transform-origin:left top;
}
.box .b:before {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  top:calc(100% - 15px);
  left:40px;
  border-left:2px solid green;
  border-bottom:2px solid green;
  transform:skewY(-45deg);
}
.box .b:after {
  content:"";
  position:absolute;
  width:27px;
  height:4px;
  top:calc(100% - 1px);
  background:#fff;
  left:42px;
}
.box p {
  margin:0;
}

<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus. Ut viverra felis nec pretium accumsan. Sed eu ante id augue placerat pellentesque eget at nibh. Quisque pharetra nisi et suscipit eleifend</p>
<span class="b"></span>
</div>
<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:300px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:350px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus.</p>
<span class="b"></span>
</div>