如何在 svg 路径中​​添加图像？

Question

我想将图像添加到 SVG 路径。我在某种程度上尝试过，但它是一个半生不熟的代码，并且图像没有采用适当的 SVG 形状。

这是它的 HTML：

<div class="top-fold">
 <div class="curve-img" id="shapeContainer">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="564" viewBox="0 0 1280 564" preserveAspectRatio="none">
              <defs>
                <rect id="bg-a" width="1280" height="575"/>
                <linearGradient id="bg-b" x1="50%" x2="71.552%" y1="-4.763%" y2="100%">
                  <stop offset="0%" stop-color="#FAFBFC"/>
                  <stop offset="100%" stop-color="#EBF3F9"/>
                </linearGradient>
              </defs>
              <g fill="none" fill-rule="evenodd">
                <mask id="bg-c" fill="#fff">
                  <use xlink:href="#bg-a"/>
                </mask>
                <path fill="url(#bg-b)" d="M0,0 L1280,0 L1280,465.166826 C1282.16971,484.337191 1283.83637,494.281583 1285,495 C1358.96463,540.665449 1275.63125,544.202225 1034,558.75895 C786.666667,573.659188 442,550.377565 0,488.914081 L0,0 Z" mask="url(#bg-c)"/>
              </g>
            </svg>

    </div><!-- curve-img end -->
  </div> <!-- top fold end -->

这是相关的 CSS。

.top-fold {
  width: 100%;
  position: relative;
  height: 80vh;
 }

.curve-img {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 4;
}

#shapeContainer {
  width: 100%;
  height: 100%;
  margin: auto;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 159, 63, 0.2),
      rgba(255, 159, 63, 0.8)
    ),
    url(https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg);
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

#shapeContainer svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (max-height: 400px) {
  #shapeContainer {
    background-size: auto 150%;
  }
}
@media screen and (max-height: 200px) {
  #shapeContainer {
    background-size: auto 200%;
  }
}
@media screen and (max-height: 100px) {
  #shapeContainer {
    background-size: auto 300%;
  }
}

这是供您参考的 codepen 链接。 https://codepen.io/enworl/pen/xPyMxL

提前感谢您的帮助。

Answer 1

您可能不喜欢补丁的不对称形式，这就是它看起来像您的样子。

我改变了补丁的形式，但实际上，正如保罗所说，你需要一个布局，你想要得到什么。

新补丁代码：

<path d="M4 4 1278 0c1 137 0 330 0 420 0 89-304 140-639 139C399 557 1 518 3 427 4 355 4 4 4 4Z" fill="grey"/>

使用新补丁代码的应用程序：

.top-fold {
  width: 100%;
  position: relative;
  height: 80vh;
 }

.curve-img {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 4;
}

#shapeContainer {
  width: 100%;
  height: 100%;
  margin: auto;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 159, 63, 0.2),
      rgba(255, 159, 63, 0.8)
    ),
    url(https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg);
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

#shapeContainer svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (max-height: 400px) {
  #shapeContainer {
    background-size: auto 150%;
  }
}
@media screen and (max-height: 200px) {
  #shapeContainer {
    background-size: auto 200%;
  }
}
@media screen and (max-height: 100px) {
  #shapeContainer {
    background-size: auto 300%;
  }
}

<div class="top-fold">
 <div class="curve-img" id="shapeContainer">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="564" viewBox="0 0 1280 564" preserveAspectRatio="none">
              <defs>
                <rect id="bg-a" width="1280" height="575"/>
                <linearGradient id="bg-b" x1="50%" x2="71.552%" y1="-4.763%" y2="100%">
                  <stop offset="0%" stop-color="#FAFBFC"/>
                  <stop offset="100%" stop-color="#EBF3F9"/>
                </linearGradient>
              </defs>
              <g fill="none" fill-rule="evenodd">
                <mask id="bg-c" fill="#fff">
                  <use xlink:href="#bg-a"/>
                </mask>
                <path fill="url(#bg-b)" d="M4 4 1278 0c1 137 0 330 0 420 0 89-304 140-639 139C399 557 1 518 3 427 4 355 4 4 4 4Z" mask="url(#bg-c)"/>
              </g>
            </svg>

    </div><!-- curve-img end -->
  </div> <!-- top fold end -->

有必要去除竖条，以某种方式改变形式，设计？我们正在等待您的布局和描述。

没有竖条纹

.top-fold {
  width: 100%;
  position: relative;
  height: 80vh;
 }

.curve-img {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 4;
}

#shapeContainer {
  width: 100%;
  height: 100%;
  margin: auto;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 159, 63, 0.2),
      rgba(255, 159, 63, 0.8)
    ),
    url(https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg);
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

#shapeContainer svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (max-height: 400px) {
  #shapeContainer {
    background-size: auto 150%;
  }
}
@media screen and (max-height: 200px) {
  #shapeContainer {
    background-size: auto 200%;
  }
}
@media screen and (max-height: 100px) {
  #shapeContainer {
    background-size: auto 300%;
  }
}

<div class="top-fold">
 <div class="curve-img" id="shapeContainer">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="564" viewBox="0 0 1280 564" preserveAspectRatio="none">
              <defs>
                <rect id="bg-a" width="1280" height="575"/>
                <linearGradient id="bg-b" x1="50%" x2="71.552%" y1="-4.763%" y2="100%">
                  <stop offset="0%" stop-color="#FAFBFC"/>
                  <stop offset="100%" stop-color="#EBF3F9"/>
                </linearGradient>
              </defs>
              <g fill="none" fill-rule="evenodd">
                <mask id="bg-c" fill="#fff">
                  <use xlink:href="#bg-a"/>
                </mask>
                <path fill="url(#bg-b)" d="M-0.4 0.4 1282 0c0.9 137.1-0.5 330.3-0.5 419.6 0 89.3-307.6 140.5-643.3 138.7C398.7 557.1-2.5 518.2-1.1 426.8 0.1 354.6-0.4 0.4-0.4 0.4Z" mask="url(#bg-c)"/>
              </g>
            </svg>

    </div><!-- curve-img end -->
  </div> <!-- top fold end -->

Answer 2

你的样本中有很多，我不确定。其中很多与您关于使用底部弯曲的面罩的问题的主旨无关。

无论如何，创建蒙版实际上非常简单。请参阅下面的示例。

.top-fold {
  position: relative;
  width: 100%;
  height: 80vh;
 }

.curve-img {
  position: absolute;
  height: 100%;
  width: 100%;
}

#shapeContainer svg {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="top-fold">
  <div class="curve-img" id="shapeContainer">
    <svg>
      <defs>
        <mask id="bg-c" maskContentUnits="objectBoundingBox">
          <path fill="white"
                transform="scale(0.000781, 0.001742)"
                d="M0,0 L1280,0 L1280,465.166826 C1282.16971,484.337191 1283.83637,494.281583 1285,495 C1358.96463,540.665449 1275.63125,544.202225 1034,558.75895 C786.666667,573.659188 442,550.377565 0,488.914081 L0,0 Z"/>
        </mask>
      </defs>

      <image xlink:href="https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg"
             width="100%" height="100%" preserveAspectRatio="xMidYMid slice" mask="url(#bg-c)"/>
    </svg>

  </div><!-- curve-img end -->
</div> <!-- top fold end -->

请注意，对 HTML 内容应用蒙版仍有一些问题，因此目前最简单的方法是将图像放入 SVG 中。

我已经从 SVG 中删除了 viewBox 和 preserveAspectRatio="none"，因为我们希望它能够在不扭曲图像的情况下与其父级一起放大。

我们还将遮罩切换为使用objectBoundingBox 单位，这样无论最终尺寸如何，它都适合图像。

---

如果你需要顶部的橙色渐变洗，你可以这样做。

.top-fold {
  position: relative;
  width: 100%;
  height: 80vh;
 }

.curve-img {
  position: absolute;
  height: 100%;
  width: 100%;
}

#shapeContainer svg {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="top-fold">
  <div class="curve-img" id="shapeContainer">
    <svg>
      <defs>
        <mask id="bg-c" maskContentUnits="objectBoundingBox">
          <path fill="white"
                transform="scale(0.000781, 0.001742)"
                d="M0,0 L1280,0 L1280,465.166826 C1282.16971,484.337191 1283.83637,494.281583 1285,495 C1358.96463,540.665449 1275.63125,544.202225 1034,558.75895 C786.666667,573.659188 442,550.377565 0,488.914081 L0,0 Z"/>
        </mask>
        <linearGradient id="bg-b" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(255, 159, 63, 0.2)"/>
          <stop offset="100%" stop-color="rgba(255, 159, 63, 0.8)"/>
        </linearGradient>
      </defs>

      <g mask="url(#bg-c)">
        <image xlink:href="https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg"
               width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
        <rect width="100%" height="100%" fill="url(#bg-b)"/>
      </g>       
    </svg>

  </div><!-- curve-img end -->
</div> <!-- top fold end -->