如何在以下 svg 中添加背景图像？答案

【问题标题】：How can i add backgroung image in the following svg?如何在以下 svg 中添加背景图像？
【发布时间】：2021-02-09 05:21:50
【问题描述】：

来自这个网站

https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

我生成了以下 svg

<div style="height: 100%; overflow: hidden;" class='parent' ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: #08f;"></path></svg></div>

问题是当我尝试在父类中添加背景图片时

.parent {
    background-image: url('../../../assets/images/calendar.png');
}

然后图像隐藏在 svg 的蓝色后面。我如何“插入”这个图像到蓝色 svg 彩色图像上？

【问题讨论】：

标签： css

【解决方案1】：

更改不透明度级别，使颜色降低不透明度。可能是这样的。

背景{ 背景颜色：蓝色，不透明度：0.5； }

【讨论】：

我需要那种没有不透明度的硬蓝色

【解决方案2】：

顾名思义 - 它是“背景图像”，因此它始终位于所选元素的背景上。

我建议你应该在父元素中创建一个<img> 标记并设置它的样式，以便.parent 具有属性position: relative 和img 应该具有position: absolute。还记得为<img> 设置top 和left/right 位置。

【讨论】：

我不明白。可以举个例子吗
据我所知，当我尝试你所说的时，我会得到单独的图像

【解决方案3】：

这里有回答https://stackoverflow.com/a/3798797/9017484

您可以通过将背景制作成图案来做到这一点：

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

你的代码应该是这样的：

<div style="height: 100%; overflow: hidden;" class='parent' >
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
        <image href="ImageFile.jpg" x="0" y="0" width="100" height="100" />
      </pattern>
    </defs>
<path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: url(#img1);"></path>
</svg>
</div>

【讨论】：

如果我复制粘贴代码，那么我不会得到 svg 的蓝色。我对 svg 图像了解不多，我应该在哪里进行更改以获得蓝色 svg？跨度>