我如何将 SVG 转换为 CSS 渐变？答案

【问题标题】：How i can convert SVG to CSS gradient?我如何将 SVG 转换为 CSS 渐变？
【发布时间】：2020-02-03 03:31:13
【问题描述】：

我有一个 SVG 图标，想将其转换为 CSS 渐变。你知道有什么免费资源可以做到这一点吗？谢谢！

【问题讨论】：

“要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，描述问题以及迄今为止为解决问题所做的工作。”
感谢您的回答。我想从 SVG 创建一个 CSS 渐变，只需使用一些程序进行编译。例如 javier.xyz/img2css 这里我可以将 SVG 转换为 CSS（box-shadow）。需要类似的东西，但要将其转换为 CSS GRADIENT。谢谢！
superuser stackexchange 可能是解决这个问题的更好地方，尽管我也不太确定它是否适合那里。对于这类问题，Google 可能是您最好的选择。

标签： html css svg

【解决方案1】：

首先将您的 SVG 导入浏览器并使用滴管工具插件或将其导入到 illustrator 和滴管中，然后选择您想要的颜色。然后使用这些十六进制代码，您可以制作任何类型的渐变。

在此处了解相关信息：https://www.w3schools.com/css/css3_gradients.asp

例如：https://jsfiddle.net/codingcrafter/zepchr1k/5/

在 w3 学校链接中，它可以向您展示如何拥有多个渐变、来自不同方向的渐变（以度为单位的圆）等。

.container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}

p.boring-p {
  font-size: 3rem;
  color: #fff;
  align-self: center;
}

<div class="container">
  <p class="boring-p">Some really boring text.</p>
</div>

【讨论】：

感谢您的回答。但我不想自己创建渐变，只是使用一些程序进行编译。例如javier.xyz/img2css 在这里我可以将 SVG 转换为 CSS（box-shadow）。需要类似的东西，但要将其转换为 CSS GRADIENT。谢谢！