使用SVG作为内容容器

Question

我试图在容器中使用绝对定位的SVG，并且应该能够缩放容器的大小，并且应该与内容一起流动。

使用SVG生成的底部内容应该保持形状的大小或流体含量。现在，所有的要求都不起作用。

以下是我正在尝试的预演

https://codepen.io/deroccha/pen/poLZqqL

这里第二次尝试/接近https://codepen.io/deroccha/pen/XWEPgrm

​

body {
  padding: 15%;
}

.card {
  max-width: 400px;
  box-shadow: 0 2px 6px #0003;
  border-radius: 25px;
  position: relative;
  background-color: #e5bb4c;
  overflow: hidden;
}
.card__header-content {
  padding: 1px 46px;
}
.card__header-content h2 {
  margin: 25px 0;
}
.card__header {
  padding: 0;
  margin: 0;
  position: relative;
  background-color: #f2efe9;
  z-index: 9;
}
.card__header svg {
  position: absolute;
  top: 0%;
  z-index: -1;
}
.card__content {
  padding: 15px;
  padding-top: 50%;
}
.card__footer {
  position: relative;
}

<div class="card">
  <div class="card__header">
    <div class="card__header-content">
      <div class="card__header-title"><h2>title</h2></div>
        <div class="card__header-teaser">
          Nulla blandit in diam nec pharetra. Quisque quis faucibus nibh. Sed ornare lacus eu auctor mollis. Aliquam posuere elementum imperdiet.
        </div>
    </div>
            <svg viewBox="0 0 387 266" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <path d="M193.5,266 C300.367099,266 387,189.007066 387,121.760563 C387,54.5140611 300.367099,0 193.5,0 C86.6329009,0 0,54.5140611 0,121.760563 C0,189.007066 86.6329009,266 193.5,266 Z" id="path-1"></path>
        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="Design-System-Overview" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="$singlebubble1">
            <mask id="mask-3" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Form-Mask-1-Copy" fill="#F2EFE9" filter="url(#filter-2)" xlink:href="#path-1"></use>
        </g>
    </g>
</svg>
  </div>
  <div class="card__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut pretium sem. Nunc malesuada mauris et elit semper, dapibus euismod felis aliquet. Curabitur id ipsum ac elit consequat ornare in tempor metus. Morbi eget elementum urna, quis sollicitudin tellus. Quisque condimentum quis nisi in semper. Aliquam in accumsan ante, et sagittis diam. Duis bibendum interdum facilisis. In placerat sapien sit amet risus auctor pretium maximus ut risus. Donec sit amet tellus eleifend, lobortis nisi nec, pretium nisl. Cras malesuada urna non est tincidunt, vitae sodales tellus molestie.
  </div>
  
  <div class="card__footer">
  </div>
  
</div>

​

Answer 1

希望这能有所帮助。

​

body {
  padding: 15%;
}

.card {
  max-width: 400px;
  box-shadow: 0 2px 6px #0003;
  border-radius: 25px;
  position: relative;
  background-color: #e5bb4c;
  overflow: hidden;

  resize: auto;  /*>>>>>>> to resize the card, remove this line*/
}
.card__header-content {
  padding: 1px 46px;
}
.card__header-content h2 {
  margin: 25px 0;
}
.card__header {
  padding: 0;
  margin: 0;
  position: relative;
  background-color: #f2efe9;
  z-index: 9;
}
.card__header svg {
  position: absolute;
  z-index: -1;
  width: 120%;
  transform: translate(-8%, -66%);
}
.card__content {
  padding: 15px;
  padding-top: 50%;
}
.card__footer {
  position: relative;
}

<div class="card">
  <div class="card__header">
    <div class="card__header-content">
      <div class="card__header-title"><h2>title</h2></div>
        <div class="card__header-teaser">
          Nulla blandit in diam nec pharetra. Quisque quis faucibus nibh. Sed ornare lacus eu auctor mollis. Aliquam posuere elementum imperdiet.
        </div>
    </div>
            <svg viewBox="0 0 387 266" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <path d="M193.5,266 C300.367099,266 387,189.007066 387,121.760563 C387,54.5140611 300.367099,0 193.5,0 C86.6329009,0 0,54.5140611 0,121.760563 C0,189.007066 86.6329009,266 193.5,266 Z" id="path-1"></path>
        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="Design-System-Overview" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="$singlebubble1">
            <mask id="mask-3" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Form-Mask-1-Copy" fill="#F2EFE9" filter="url(#filter-2)" xlink:href="#path-1"></use>
        </g>
    </g>
</svg>
  </div>
  <div class="card__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut pretium sem. Nunc malesuada mauris et elit semper, dapibus euismod felis aliquet. Curabitur id ipsum ac elit consequat ornare in tempor metus. Morbi eget elementum urna, quis sollicitudin tellus. Quisque condimentum quis nisi in semper. Aliquam in accumsan ante, et sagittis diam. Duis bibendum interdum facilisis. In placerat sapien sit amet risus auctor pretium maximus ut risus. Donec sit amet tellus eleifend, lobortis nisi nec, pretium nisl. Cras malesuada urna non est tincidunt, vitae sodales tellus molestie.
  </div>
  
  <div class="card__footer">
  </div>
  
</div>

​