如何正确地将 Figma 圆锥（又名径向）渐变转换为 android 矢量可绘制？

Posted 2023-03-28

【中文标题】如何正确地将 Figma 圆锥（又名径向）渐变转换为 android 矢量可绘制？

【英文标题】：How to properly convert Figma conic (aka radial) gradients to android vector drawable?

【发布时间】：2021-12-16 17:10:56

【问题描述】：

我在创建一个 android 矢量可绘制对象时遇到了问题，如 Figma 所示。 图片如下：

这是一个使用 3 种渐变组合作为背景的矩形。 Figma 代码如下所示：

属性

height: 474px;
width: 312px;
left: 32px;
top: 170px;
border-radius: 8px;

颜色：

background-blend-mode: screen;
background: conic-gradient(from 180deg at 50% 50%, #FFFFFF -9.78deg, #000000 9.35deg, #FFFFFF 69.37deg, #000000 121.87deg, #FFFFFF 161.25deg, #000000 202.5deg, #FFFFFF 245.62deg, #000000 303.75deg, #FFFFFF 350.22deg, #000000 369.35deg);
background: conic-gradient(from 180deg at 50% 50%, #FFFFFF -22.26deg, #000000 27.81deg, #FFFFFF 81.58deg, #000000 116.79deg, #FFFFFF 158.7deg, #000000 216.69deg, #FFFFFF 262.5deg, #000000 307.09deg, #FFFFFF 337.74deg, #000000 387.81deg);
background: linear-gradient(151.68deg, #1DC4BD 0.54%, rgba(217, 240, 66, 0.981193) 17.64%, rgba(248, 165, 253, 0.893164) 42.5%, rgba(162, 172, 249, 0.951971) 60.11%, rgba(60, 244, 147, 0.59) 83.94%, #3DBEF0 100%);

CSS 代码（Android 代码无法正常工作）：

position: absolute;
width: 312px;
height: 474px;
left: 32px;
top: 170px;

background: conic-gradient(from 180deg at 50% 50%, #FFFFFF -9.78deg, #000000 9.35deg, #FFFFFF 69.37deg, #000000 121.87deg, #FFFFFF 161.25deg, #000000 202.5deg, #FFFFFF 245.62deg, #000000 303.75deg, #FFFFFF 350.22deg, #000000 369.35deg), conic-gradient(from 180deg at 50% 50%, #FFFFFF -22.26deg, #000000 27.81deg, #FFFFFF 81.58deg, #000000 116.79deg, #FFFFFF 158.7deg, #000000 216.69deg, #FFFFFF 262.5deg, #000000 307.09deg, #FFFFFF 337.74deg, #000000 387.81deg), linear-gradient(151.68deg, #1DC4BD 0.54%, rgba(217, 240, 66, 0.981193) 17.64%, rgba(248, 165, 253, 0.893164) 42.5%, rgba(162, 172, 249, 0.951971) 60.11%, rgba(60, 244, 147, 0.59) 83.94%, #3DBEF0 100%);
background-blend-mode: screen, difference, normal;
opacity: 0.5;
border-radius: 8px;

figma 代码为图片：design tab, inspect tab 1, inspect tab 2

你能画出这样的设计吗，比如一个 android 矢量可绘制对象（又名.xml 文件）？

我尝试了很多方法（svg，手动，...），但无法像 Figma 中所示绘制它。我取得的最好结果是this 使用this 源代码查看。如果您需要，我可以添加其他信息

【参考方案1】：

似乎 SVG 没有对角渐变或圆锥渐变的标准支持，这就是为什么您在创建该类型的 android 矢量可绘制对象时遇到问题的原因。见here。

CSS 只是最近才获得该功能，它解释了为什么您获得的导出 CSS 代码可以正常工作。 我建议您在线尝试其中一种 CSS 到 SVG 转换器 (here's an example)，看看是否可行。否则，您可能必须以其他格式导出渐变以在您的应用中使用。

【讨论】：

kmhcreative.com/pages/css3-2-svg >> “抱歉，您所在的国家/地区不提供此内容。”

哦。好吧，您可以在 Google 上搜索 CSS 到 SVG 转换器并找到适用于您所在国家/地区的转换器。或者，您可以使用 ***。这是我刚刚看到的另一个：sendeyo.com/onlineconverter/en/css/svg

感谢您的回复！

感谢您的回答，检查了您提供的 SVG 转换器，不幸的是，它不起作用。目前，我在项目中使用 webp（而不是 android vector drawable）。但是让我们把这个问题悬而未决，也许有人可以使用 SVG 或其他可调整大小的格式来绘制这样的渐变

好吧，这很酷。 ??