拉伸SVG以适合其父对象的高度和宽度的100％

Question

（已解决-通过Codepen链接查看解决方案） 我正在尝试使用SVG图像作为背景，该图像将始终延伸到其父div的100％。 已经尝试过：

• 用作CSS背景图像并设置背景大小：100％100％。
• 将绝对值放到父级div并设置高度：100％。
• preserveAspectRatio =“ xMaxYMax”。
• 即使我手动更改viewBox也不起作用。
• 尝试了我在这里找到的所有相关问题-Stretch SVG background image?，Automatically scale an SVG to its parent，Fit/Stretch SVG to div background without 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/
在该绿色气泡中，文本的长度可以变化，因此当添加更多文本且div增大时，我需要SVG进行拉伸。

我还创建了一支小笔-

.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>