Làm cách nào để xuất tệp .svg từ Adobe Illustrator bằng ID hình dạng?

Câu hỏi của tôi rất đơn giản.

Làm cách nào để xuất tệp SVG từ Adobe Illustrator bằng ID hình dạng? Khi tôi xuất dưới dạng SVG, tên nhóm của tôi chuyển thành nhóm có tên nhóm là ID, đó cũng là hành vi tôi mong đợi từ hình dạng, nhưng hình dạng của tôi chỉ nhận được một số ID ngẫu nhiên thay vì tên của họ ...

ví dụ về đầu ra mong muốn:

<g id="liikkeet">
        <polygon id="s281" style="fill:#ED3B95;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" points="157,515.3 157,408.3     180,385.1 180,369.3 248,369.3 248,391.3 266,391.3 266,402.3 393,402.3 393,513.3   "/>
</g>

Tôi đang làm gì sai? Hiện tại tôi nhận được đa giác và đường dẫn không có ID mặc dù tôi đã đặt tên chúng trong Illustrator.

Cảm thấy nỗi đau của bạn. Câu trả lời ngắn gọn: Xuất khẩu AI SVG là (một trong) lý do tôi cần trị liệu.

Câu trả lời dài: Tôi đã xuất thành công SVG từ AI (CS6) với id. Xem bên dưới:

Trở thành:

<g id="ZONES">
<path id="Zone3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M756.485,373.758l-1.764,8.361l16.43,3.908l-0.426,2.34
    l6.586,1.164l0.533-2.439l26.047,5.664L789.667,464.4l-10.812-2.232l-3.975,18.355l11.258,2.34l-5.574,26.797l-1.59-0.379
    l-13,69.334l11.33,2.646l1.67-8.312l37.164-186.996L756.485,373.758z M558.887,341.28l92.963,19.719l-0.625,6.619l18.766,3.914
    l2.24-6.494l57.076,11.744l1.832-9.164l-170.873-34.653L558.887,341.28z"/>
<path id="Zone4" fill="none" stroke="#000000" stroke-miterlimit="10" d="M434.33,427.335c-0.429-1.498-0.982-3.717-1.175-5.787
    c-0.233-2.526-0.146-5.851-0.074-7.606l0.062-1.478l-24.606-1.399l-88.614-59.936l-23.902,34.039l-11.858,17.166l38.417,25.742
    L316.31,543.08l14.66,0.7l4.754-102.191l48.545-14.975l50.645,2.746L434.33,427.335z"/>
<polygon id="Zone8" fill="none" stroke="#000000" stroke-miterlimit="10" points="675.512,441.043 661.075,418.389 
    670.225,371.531 651.227,367.615 641.927,414.635 619.298,429.342 551.059,415.363 546.972,433.756 774.876,480.521 778.86,462.17 
        "/>

Một vài vấn đề mặc dù:

• đôi khi AI chỉ cần thêm một chuỗi ngẫu nhiên vào id đó .. tránh ký tự gạch dưới, là điều tôi có thể nói một cách chắc chắn.
• hãy chuẩn bị rằng một số trong số này sẽ trở thành đường dẫn và một số trở thành đa giác, như bạn thấy ở trên. Vì vậy, nếu bạn đang thao túng tất cả chúng cùng một lúc, hãy gán cho chúng tất cả một lớp "thisIsOneOfMyZones", ví dụ như sử dụng jQuery. Đó là hack tốt nhất mà tôi nghĩ ra cho đến nay. Vui lòng chia sẻ nếu bạn hack bí mật về lựa chọn đường dẫn / đa giác trong xuất.
• Có thể, việc cung cấp cho nhóm cha một id sẽ ảnh hưởng đến cách dịch id của nút con trong quá trình xuất SVG. Dù sao thì điều đó cũng cần, hoặc ít nhất là thuận tiện nếu bạn muốn thao tác những chương trình này, điều mà tôi đoán là bạn đang làm :)

Để cung cấp ID cho các nhóm và đường dẫn, bạn phải đặt tên cho chúng trong Illustrator. Vì vậy, nếu bạn có một lớp được gọi là my_layer và một đường dẫn gọi là my_path trong Illustrator và bạn lưu chúng dưới dạng một Svg, bạn sẽ nhận được:

<g id='my_layer'>
 <path id='my_path' d='...#coordinates...' />
</g>

Nếu bạn không đặt tên đường dẫn của mình trong Illustrator, nó sẽ lưu nó với một id ngẫu nhiên. Nếu bạn đặt tên đường dẫn và lớp có cùng tên, Illustrator sẽ phải thay đổi một trong số chúng, vì id phải là duy nhất.

Âm thanh như bạn đang đề cập đến một mẫu mã như thế này:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
<g id="Layer_3">
</g>
</svg>

Khi bạn đề cập đến "xuất với ID hình dạng" để kết quả, <g id="Layer_1">tôi sẽ khuyên bạn nên đặt một hình dạng trên mỗi lớp được đặt tên và lưu nó dưới dạng SVG. Tham khảo: " Tôi đã tạo một bản đồ trong AI, nhưng kích thước tệp là LỚN như một svg? "

Bạn luôn có thể xuất mã và đi vào trình chỉnh sửa mã và sửa đổi ID.

Điều này:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
        <g id="jjjuho">
            <polygon id="manItsMonday" style="fill:#ED3B95;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" points="157,515.3 157,408.3180,385.1 180,369.3 248,369.3 248,391.3 266,391.3 266,402.3 393,402.3 393,513.3   "/>
        </g>    
    </svg>
</div>

Riders:

Ngoài việc đánh dấu ID với tên lớp như đã lưu ý ở trên, tôi thấy việc chuyển đổi hình dạng của tôi thành các đường dẫn ghép là rất hữu ích.

Điều này sẽ chuyển đổi Đa giác thành Đường dẫn có thể khiến mọi thứ đồng nhất hơn một chút cho CSS của bạn.

Trong Illustrator: Object> Compound Path> Make