SVG-Path 作为 HTML 元素的背景图像 [重复]答案

【问题标题】：SVG-Path as background-image of an HTML-Element [duplicate]SVG-Path 作为 HTML 元素的背景图像 [重复]
【发布时间】：2021-01-15 21:53:39
【问题描述】：

基本上我的问题和这个问题一样：SVG path as div dackground

我尝试了那里给出的解决方案，它一般都有效。我的问题：我需要更改用 SVG 制作的线条的颜色。它呈现为黑色，当我将“填充”属性添加到路径时，根本没有呈现任何内容。

This 是我在开发工具中渲染的背景图片

提前谢谢你。

【问题讨论】：

请粘贴代码而不是截图。让人们更容易帮助你...

标签： html css svg

【解决方案1】：

背景 img 不是 DOM 的一部分，您无法对其进行操作。可能是定期使用它，以正常方式将其嵌入页面中，但绝对定位，使其全宽和页面高度，然后使用 z-index css 属性将其放在所有其他 DOM 元素的后面一个页面。

【讨论】：

【解决方案2】：

你只需要像这样在 style 属性中添加 fill 和 fill-opacity 属性

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 style="fill:red;fill-opacity:1;" 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;
}

&lt;div class="back"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

嗯，它真的是有线的。
我找到了一个解决方案，您可以编写（颜色名称与您想要的结果相似）并且它可以工作。但是如果你写 #00F 或 "#00F" 而不是 "blue" 不行！！！原因不明，所以我建议你使用类似于你想要的十六进制rgb的颜色名称。
无论如何，对于背景颜色，如果您编写例如 background-color:#7d212b; 而不是 background-color:pink; 成功了！

【讨论】：

我的问题被标记为重复，并在消息中链接了以下内容：stackoverflow.com/questions/30733607/… 那里给出的解决方案实际上有效:) 将颜色代码中的 '#' 替换为 '%23' 和它有效 - 给出的原因是，它是一个 url，因此无法处理 '#' 字符^^