SVG路径作为div背景 [英] SVG path as div background

问题描述

我有一个SVG路径(如下所示)，我想用作div中的背景，有谁知道该怎么做，我已经在网上搜索了，但找不到任何简单的示例?

I have an SVG path (as below) that I want to use as a background in a div, does anyone know how to do this, I've searched the web but cant find any simple examples?

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

推荐答案

简单地将其用作 background-image ，然后调整所需的值:

Simply use it as background-image then adjust the needed values:

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>

这篇关于SVG路径作为div背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！