使用颜色的类名从 Illustrator 导出 SVG

问题描述

我在一个插画文件中内置了大约 200 个图标。我试图找出一种方法将颜色设置为类名，而不是十六进制值，以便将类名分配给对象，以便可以更轻松地使用 CSS 更改它。

例如，这是我目前能够导出的内容：

<svg id="Iconography" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="Compound_Path" data-name="Compound Path" d="M19.34,14.68A1,1,18,16l-6-6L6,16a1,1-1.35-1.34L11.29,8a1,1.42,0Z" fill="#707070"/></svg>

但我希望 fill="#707070" 为 fill="colorIconPrimary"，因为在导出和手动更改后打开每个 svg 非常费力（加上一些图标可能有多种颜色）

解决方法

此脚本可以将文件夹“d:\tmp”中所有 svg 文件中的 fill="#707070" 替换为 fill="colorIconPrimary"：

var folder = Folder("d:/tmp");
var files = folder.getFiles("*.svg");

for (var i=0; i<files.length; i++) {
    var f = File(files[i]);
    f.open("r");
    var contents = f.read();
    f.close();
    contents = contents.replace(/fill="#707070"/g,'fill="colorIconPrimary"')
    f.open("w");
    f.write(contents);
    f.close();
}

,

在 Illustrator 中，任何将 fill 或 stroke 颜色设置为 RGB 黑色 (#000000) 的元素都将在没有任何样式属性的情况下导出。

因此，当使用内联时，SVG 中的这些元素将继承您在 CSS 中定义的任何内容

svg#iconography {
  fill: blue;
  stroke: red;
}

这种方法也适用于外部引用的 SVG 片段（一个可缓存的 SVG 文件中的多个图标）。可以找到更多信息here