使用Illustrator在SVG路径上指定CSS类名称

有没有办法在Illustrator中编辑SVG文件，您可以在其中为每个路径指定CSS类？

我已经在Illustrator中知道，如果给层名称一个真实的名称，Illustrator将使用该名称作为路径的ID，如果您不打算在同一页面上多次重复使用该图标，那就很好了。

我当前的解决方法是只使用IDs方法，但是随后在我的代码编辑器中将ID转换为类，但是每次生成SVG Sprite时都必须这样做很烦人。

如果在Illustrator中当前无法做到这一点，那么是否有其他应用程序可以让您指定呢？还是Grunt或Gulp包装？

看来您可以使用Inkscape进行破解，所以如果没有其他好的解决方案，我可能会考虑一下。

我要完成一个艰巨的任务。通过使用“ 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'
]);

看起来Ian Dunn发布的链接可能是您的票。这是该页面的摘录：

在SVG导出选项中，选择“样式元素”，然后选择“包括未使用的图形样式”选项。它将在SVG文档中将sandStyle和blueSky声明为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中删除样式定义。

链接的页面对此进行了说明，但是为了完整起见，Illustrator仅在SVG Options对话框CSS Properties: Style Element的Advanced区域（您可能需要单击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

5. 使用适当的CSS属性设置（dev幸福）

CC：illustrator使用定义的图形样式创建命名类（智能，有用）

在Illustrator 21.0.0（2017）以及更低版本中：

1. 在“图形样式”面板中创建新样式
2. 双击新样式并为其指定一个自定义名称，例如“我的样式”
3. 将该样式应用于一个或多个元素
4. 导出SVG

SVG中的元素将被赋予class属性，其值为“ my-style”。然后，您可以使用外部CSS覆盖样式。

请注意，如果您的样式名称包含空格，它将转换为连字符。

简单的方法，类似于Grunt任务，但更加简单：

对于要创建类的所有对象，请提供名称，例如：“ myClassmainCircle”和“ myClassmainStar”。导出后，将所有：'id =“ myClass'替换为'class =”'

结果将是：class =“ mainCirle” class =“ mainStar”