SVG路径作为div背景[重复]

Posted 2023-03-06

【中文标题】SVG路径作为div背景[重复]

【英文标题】：SVG path as div background [duplicate]

【发布时间】：2018-08-19 11:17:02

【问题描述】：

我有一个 SVG 路径（如下所示），我想在 div 中用作背景，有人知道怎么做吗，我在网上搜索过但找不到任何简单的示例？

<svg xmlns="http://www.w3.org/2000/svg"   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>

【参考方案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"   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>

【讨论】：

很好的答案，从来没有教过你可以通过 xml throw that，Bahi :)

真的很好用……太棒了

【参考方案2】：

您不能将内联 svg 定义为背景。您在这里有 2 个解决方案：

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

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

【讨论】：

很好的答案，虽然它并不清楚如何设置第二个 div 容器的样式以显示标量内容。

请注意：您也可以 - 在 IE11 中使用一些 restrictions - 在 CSS 中直接使用（可选 base64 编码的）SVG 作为背景图像。