有没有办法在 Illustrator 中编辑 SVG 文件，您可以在其中为每个路径指定一个 CSS 类？
我已经在 Illustrator 中知道，如果您为图层名称指定一个实际名称，Illustrator 将使用该名称作为路径的 ID，如果您不打算在同一页面上多次重复使用该图标，这很好。
我目前的解决方法是只使用 IDs 方法，然后在我的代码编辑器中将 IDs 转换为类，但是每次生成 SVG 精灵时都必须这样做很烦人。
如果目前在 Illustrator 中无法做到这一点，是否还有其他应用程序可以让您指定？或者也许是 Grunt 或 Gulp 包？
看起来您可以通过hack使用 Inkscape 来做到这一点，所以如果没有其他好的解决方案，我可能会考虑一下。
看起来Ian Dunn 发布的链接可能是你的票。这是该页面的摘录：
在 SVG 导出选项中，我选择样式元素，然后选择包含未使用的图形样式选项。它将把 sandStyle 和 blueSky 声明为 SVG 文档中的 CSS 样式。
这是 Illustrator CC 生成的 SVG 输出：
<style type="text/css">
.sandStyle {
fill:#BFAF8F;
stroke:#A6806A;
stroke-width:3;
stroke-miterlimit:10;
}
.blueSky {
fill:#338AC4;
stroke:#3469B7;
stroke-width:3;
stroke-miterlimit:10;
}
</style>
<g id="mySquare">
<rect x="90.5" y="15.5" class="sandStyle" width="64" height="63"/>
</g>
<g id="myCircle">
<circle class="sandStyle" cx="42" cy="46" r="34.2"/>
</g>
Illustrator 可以将图形样式导出为样式元素中的 CSS，并通过 SVG 代码中的类应用它们。这就是您可以在导出的 SVG 中生成类的方式。根据您希望这些类执行的操作，您可以在另一个 CSS 文件中定义它们并从导出的 SVG 中删除样式定义。
链接页面说明了这一点，但为了完整起见，如果您在SVG 选项对话框CSS Properties: Style Element的高级区域（您可能需要单击）中设置，Illustrator 只会生成样式元素和类：More Options
我还要注意，生成的代码永远不会在所有情况下都非常完美。手写代码往往更轻巧，更易于人类阅读（如果您要这样做的话）。我建议阅读 Wikimedia 用户 Quibik 关于手动清理 SVG 文件的文档并查看grunt-svgmin。
我刚刚遇到这个问题并找到了以下解决方案（适用于 Illustrator CC）：
将命名的“图形样式”应用于要命名的路径，并使用内部 CSS 导出 SVG。例如，名为 my-icon 的图形样式将定义一个内部my-icon类并将该类应用于正确的路径。
截图示例：
创建一个新的图形样式：
导出为... SVG：
输出：
<defs><style>.my-icon{ fill:#000; }</style></defs>
<path class="my-icon">...</path>
来源：https ://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator
- 使用适当的 CSS 属性设置（开发者幸福感）
CC：illustrator 使用定义的图形样式创建命名类（聪明，有用）
我用 Grunt 任务来做这件事。通过使用“grunt-text-replace”，我可以通过自定义正则表达式传递我的缩小 SVG（svgmin），该表达式将所有乱码的类引用替换为正确的类。
例如，在 Illustrator 中，将图层/对象名称声明为class="tree"。这将由 Illustrator 导出为id="class="tree""。下面的 grunt 任务将处理它并使其成为class="tree"。我还在其他一些将进行 ID 清理的子任务下方粘贴（推荐）。
replace: {
// ID cleanup: performs a manual ID cleanup as Illustrator exports a mess
illustrator: {
src: ['assets/svg/optimised/*.svg'],
overwrite: true,
replacements: [{
// Remove escaped underscore character
from: '_x5F_',
to: '_'
}, {
// Replace class names with proper classes
//class_x3D__x22_tank-option_x22__2_
from: /id\=\"class_x3D__x22_(.+?)_x22_(.*?)\"/gi,
to: function(matchedWord, index, fullText, regexMatches) {
return 'class="'+ regexMatches[0].toLowerCase()+'"';
}
}, {
// Lowercase all ids
from: /id\=\"(.+?)\"/gi,
to: function(matchedWord, index, fullText, regexMatches) {
return 'id="'+ regexMatches[0].toLowerCase()+'"';
}
}, {
// Lowercase all id references to match the previous replace rule
from: /url\(\#(.+?)\)/gi,
to: function(matchedWord, index, fullText, regexMatches) {
return 'url(#'+ regexMatches[0].toLowerCase() +')';
}
}, {
// Lowercase all id href to match the previous replace rule
from: /href\=\"\#(.+?)\"/gi,
to: function(matchedWord, index, fullText, regexMatches) {
return 'href="#'+ regexMatches[0].toLowerCase() +'"';
}
}, {
// Remove all font references as we will use CSS for this
from: /font\-family\=\"(.+?)\"/gi,
to: function(matchedWord, index, fullText, regexMatches) {
return '';
}
}]
}
}
然后你可以在你的 Gruntfile 中调用这个任务：
grunt.registerTask('svgclean', [
'replace:illustrator'
]);
在 Illustrator 21.0.0 (2017) 和可能的早期版本中：
SVG 中的元素将被赋予一个值为“my-style”的类属性。然后您可以使用外部 CSS 来覆盖样式。
请注意，如果您的样式名称包含空格，它将转换为连字符。