SVG 路径作为 div 背景

Question

我有一个 SVG 路径（如下所示），我想将其用作 div 中的背景，有谁知道如何执行此操作，我已经在网上搜索过但找不到任何简单的示例？

<svg xmlns="http://www.w3.org/2000/svg" width="4442" height="720" viewBox="0 0 4442 720">
  <path d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" transform="translate(0 0)" style="fill-opacity:0.029999999329447746"></path>
</svg>

Answer 1

只需使用它，background-image然后调整所需的值：

div.back {
  width:600px;
  height:120px;
  background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 4442 720"><path d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" ></path></svg>');
  background-size:cover;
  background-color:pink;
}

<div class="back"></div>