展开SVG形状高度以匹配内容

Question

我创建了一个SVG形状，其中包含各种基于文本的内容，范围在1-8行之间。我已经创建了自己的形状和内容，但我使用position:absolute;规则将内容提取到SVG中。这意味着如果我添加更多内容，形状将不会扩展。

这是否可以使用SVG元素，我看过使用text标签，但似乎文本被分成单行，并以特定的x，y绘制，我不会＆＃ 39;相信会对我有用。

    <div class="wrp">
<svg viewBox="0 0 1416 200">
    <path d="M1337.59107,-1.0658141e-14 L0,-1.0658141e-14 L0,325 L1027.36348,325 L1337.59107,-3.90798505e-14 Z" id="Combined-Shape" stroke="none" fill="#9DC8F2" fill-rule="evenodd"></path>
</svg>
<div class="img-wrp">
  <img src="https://www.maxizoo.fr/wp-content/uploads/2016/06/aliments-hamster.jpg" alt="">
</div>
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="caption-wrp">
        <div class="item">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales, odio ut egestas egestas, orci neque interdum sem, at malesuada enim tellus eget dui.
          </p>
          <span>Name</span>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

这就是我提取内容的方式;

.caption-wrp{
  padding:0px 50px;
  text-align: center;
  position: absolute;
  top: -100px;
  z-index: 999;
  color: #fff;
}

JSFiddle - https://jsfiddle.net/783ob55u/2/

我读到的关于SVG（视图框）的所有内容都表明它被绘制为修复大小。

编辑 - 我尝试实现的示例（不是内容大小会改变） -

Answer 1

我认为你应该将图像定位为position: absolute;并让文字将其视为实际高度。看看我为你做的这个例子。

jsFiddle

Answer 2

我尝试过另一种解决方案，如果我理解的话，它应该是获得你想要的东西的好基础。 图像并非完全符合此目的，因此您可能想要找到另一个图像或者有一组2个图像来切换媒体查询。

看看这里：http://codepen.io/anon/pen/JWyeQN

.box {
  position: relative;
  margin-top: 10%;
  padding: 1.5em 20% 1.5em 1em;
  background-color: #69f;
  overflow: hidden;
}
.right-corner {
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS7XbUc4oQQ0d0Ig4DvKipwx81Jk2B6FTsD7iyZCMS6tHBhHEQ7) no-repeat right top;
  background-size: cover;
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
svg {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}
polygon {
  fill:#69f;
}

整个包装器都是响应式的，文本块也是正确的边框将始终覆盖容器的100％高度。

如果事情不是很清楚，请告诉我。

希望它有所帮助！