将 svg 线性渐变转换为 CSS 线性渐变 (Adobe XD)

平面设计 svg css adobe-xd
2022-02-15 06:52:26

我得到了一个网站的 Adob​​e .xd 文件,该文件需要在 WordPress 中创建。设计的一部分是线性渐变(例如图像的边界)。我的问题是,我似乎找不到从这些元素中“提取”相应 css 的选项。

一个例子:

在此处输入图像描述

现在,我想要描述这个底部边框的 CSS,它是一个带角度的线性渐变。我可以得到颜色的十六进制代码,但不是角度,也不知道是否有停靠点和位置。

我看到的选项是:

  1. 以某种方式从 Adob​​e XD 中提取 CSS。这可能吗?
  2. linearGradient标签从导出的 SVG 文件转换为 css。如何才能做到这一点?

导出底部边框的 SVG 中的线性渐变标记如下:

<linearGradient id="linear-gradient" x1="1.089" y1="-3.5" x2="-0.775" y2="2.611" gradientUnits="objectBoundingBox">
  <stop offset="0" stop-color="#ac2284"/>
  <stop offset="1" stop-color="#003bff"/>
</linearGradient>
1个回答

我需要将<linearGradient>许多 SVG 文件转换为 CSS,我做了这个:https ://codepen.io/JosephusPaye/pen/vbaxBa?editors=0010 。

粘贴一个 SVG 源,它会提取所有的<linearGradient>s 并将它们转换为 CSS。

它是如何工作的,总结如下:

  • 将输入解析为 SVG 文档
  • 查找<linearGradient>所有
  • x1使用、x2属性y1计算坡度角y2
  • 查找所有<stops><linearGradient>提取偏移、颜色和不透明度
  • 使用提取的角度和停止生成 CSS 渐变

有关更多详细信息,请参阅源代码。