Tôi làm điều này với một nhiệm vụ Grunt. Bằng cách sử dụng "grunt-text-thay thế", tôi có thể vượt qua các SVG đã rút gọn của mình (svgmin) thông qua một biểu thức chính quy tùy chỉnh thay thế tất cả các tham chiếu lớp bị cắt xén bằng các lớp thích hợp.
Trong Illustrator, ví dụ khai báo tên lớp / đối tượng là class = "cây" . Điều này sẽ được Illustrator xuất ra dưới dạng id = "class =" cây "" . Nhiệm vụ lẩm cẩm dưới đây sẽ đảm nhiệm việc đó và biến nó thành class = "cây" . Tôi cũng đang dán bên dưới một số nhiệm vụ khác sẽ làm sạch ID (được khuyến nghị).
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 '';
}
}]
}
}
Sau đó, bạn có thể gọi tác vụ này trong Gruntfile của mình là:
grunt.registerTask('svgclean', [
'replace:illustrator'
]);
