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，然后调整所需的值：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您无法将内联svg定义为背景。你有2个解决方案：

1 - 将svg存储为单独的文件，并将其设置为background-image: url('path/to/your/svg/file.svg');

2 - 如果您确实需要在HTML中将其内联到任何原因，请创建另一个div，将其设置为绝对位置以使其适合您的主要div。然后使用z-index来引导您获得所需的结果

SVG路径作为div dackground

2 个答案: