ระบุชื่อคลาส CSS บนพา ธ SVG โดยใช้ Illustrator

มีวิธีแก้ไขไฟล์ SVG ใน Illustrator ที่คุณสามารถระบุคลาส CSS สำหรับแต่ละพา ธ ได้ไหม

ฉันรู้อยู่แล้วใน Illustrator ว่าถ้าคุณตั้งชื่อเลเยอร์เป็นชื่อจริงแล้ว Illustrator จะใช้ชื่อนั้นเป็น ID ของพา ธ ซึ่งใช้ได้ถ้าคุณไม่ได้วางแผนที่จะใช้ไอคอนซ้ำอีกครั้งในหน้าเดียวกัน

วิธีแก้ปัญหาปัจจุบันของฉันคือการใช้เมธอด ID แต่หลังจากนั้นแปลง ID เป็นคลาสในตัวแก้ไขโค้ดของฉัน แต่มันค่อนข้างน่ารำคาญที่ต้องทำทุกครั้งที่สร้างสไปรต์ SVG ของฉัน

หากไม่สามารถทำได้ใน Illustrator ในปัจจุบันมีแอพอื่น ๆ ที่จะอนุญาตให้คุณระบุหรือไม่? หรืออาจเป็นแพ็คเกจ Grunt หรือ Gulp?

ดูเหมือนว่าคุณอาจจะทำกับ Inkscape ด้วยการแฮ็กดังนั้นฉันอาจดูว่าหากไม่มีวิธีแก้ปัญหาที่ดีอื่น ๆ

ฉันทำสิ่งนี้กับงาน Grunt โดยใช้ "grunt-text-replace" ฉันสามารถส่ง SVG แบบย่อ (svgmin) ของฉันผ่านนิพจน์ทั่วไปแบบกำหนดเองที่แทนที่การอ้างอิงคลาสที่อ่านไม่ออกทั้งหมดด้วยคลาสที่เหมาะสม

ใน Illustrator, ประกาศชื่อเลเยอร์ / วัตถุเป็นclass = "ต้นไม้"ยกตัวอย่างเช่น นี้จะมีการส่งออกโดย Illustrator เป็นid = "class =" ต้นไม้ "" ด้านล่างนี้งานที่ทำเสียงฮึดฮัดจะดูแลและทำให้มันclass = "ต้นไม้" ฉันกำลังวางภารกิจย่อยอื่น ๆ ไว้ด้านล่างเพื่อทำการล้างข้อมูล 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 ฉันเลือกองค์ประกอบสไตล์และเลือกตัวเลือกรวมถึงลักษณะกราฟิกที่ไม่ได้ใช้ มันจะประกาศ sandStyle และ blueSky เป็นสไตล์ CSS ในเอกสาร SVG

นี่คือเอาต์พุต SVG ที่สร้างโดย Illustrator CC:
<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 จะสร้างองค์ประกอบสไตล์และคลาสหากคุณตั้งค่าCSS Properties: Style Elementในพื้นที่ขั้นสูง (คุณอาจต้องคลิกMore Options) ของไดอะล็อกตัวเลือก SVG:

ฉันยังทราบด้วยว่ารหัสที่สร้างขึ้นจะไม่สมบูรณ์แบบสำหรับทุกสถานการณ์ รหัสที่เขียนด้วยมือมีแนวโน้มที่จะเบาและง่ายขึ้นสำหรับมนุษย์ที่จะอ่าน (ถ้านั่นคือสิ่งที่คุณกำลังจะทำ) ผมอยากแนะนำให้อ่านมากกว่าเอกสารวิกิมีเดียผู้ใช้ Quibik ในการทำความสะอาดไฟล์ SVG ด้วยมือและการดูที่ฮึดฮัด svgmin

ฉันเพิ่งพบปัญหานี้และพบวิธีแก้ไขปัญหาต่อไปนี้ (สำหรับ Illustrator CC):

ใช้ชื่อ "ลักษณะกราฟิก" กับเส้นทางที่คุณต้องการตั้งชื่อและส่งออก SVG ด้วย CSS ภายใน ตัวอย่างเช่นสไตล์กราฟิกชื่อ 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"