2016-03-11 9 views
6

के साथ कैसे प्रबंधित करें मैं अपने पृष्ठ में svg आइकन का उपयोग करना चाहता हूं। डिजाइनर जो मैं काम करता हूं स्केच का उपयोग छवि को डिजाइन करने और svg में परिणाम निर्यात करने के लिए करता हूं। स्केच निर्यात कोड (id="Page-1", id="My-Star" और id="Star-1" विशेषताओं पर ध्यान दें) के लिए विभिन्न id टैग जोड़ती है:स्केच निर्यात किए गए एसवीजी को ids

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <g id="My-Star" stroke="#979797" fill="#D8D8D8"> 
      <polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon> 
     </g> 
    </g> 
</svg> 

मैं html में सीधे svg शामिल हैं। ऐसा करके, मैं एक ही id कई बार पेश करता हूं। अमान्य एचटीएमएल के अलावा जो काम करने के इस तरीके का परिणाम है, मुझे id एस के आधार पर svg तत्वों को स्टाइल करने की आवश्यकता है। यह एक बुरा अभ्यास है।
वहाँ एक रास्ता जब स्केच से SVGs निर्यात class तों साथ id रों को बदलने के लिए है:

मैं सीएसएस का उपयोग SVGs शैली, एक example

सवाल पर एक नज़र डालें? क्या डिजाइनर को कुछ प्लगइन या सेटिंग दे सकती है? यदि नहीं, तो डिजाइनरों से svg संपत्ति प्राप्त करने और पृष्ठ में इसका उपयोग करने में इष्टतम वर्कफ़्लो क्या है?

+0

आदर्श नहीं होने पर, आप मैनुअल का उपयोग एसवीजी डेटा – Martin

उत्तर

-1

मैं एक ही समस्या में भाग गया, इसलिए एक प्लगइन बनाया। इस प्लगइन के साथ, स्लाइस से निर्यात किए गए एसवीजी में सभी आईडी बीईएम शैली में नामित हैं।

https://github.com/Knowre-Dev/svg-namespacing

+0

पर ढूंढ सकते हैं और प्रतिस्थापित कर सकते हैं अपनी प्लगइन के कोड को देखते हुए, आप 'id' विशेषता के _content_ को प्रतिस्थापित करते हैं। लेकिन 'id' विशेषता फ़ाइल में बनी हुई है। इसका मतलब है कि जब आपके एचटीएमएल दस्तावेज़ में एकाधिक समान svgs होते हैं, तो आप एक ही आईडी के कई घटनाओं के साथ समाप्त होते हैं। मैं 'id' विशेषता को 'class'attribute के साथ प्रतिस्थापित करने का तरीका ढूंढ रहा था, लेकिन इसकी सामग्री को रखता हूं। आपकी प्लगइन ने मुझे अपनी प्लगइन लिखने का एक प्रारंभिक बिंदु दिया है। तो इसके लिए आपका शुक्रिया! –

0

लग रहा है जैसे डिजाइनरों पूछ अद्वितीय समूह के नाम का उपयोग करने के अलावा कोई अच्छा समाधान अन्य शामिल हैं।

समूह नाम जेनरेट किए गए एसवीजी में समूह आईडी बन जाते हैं।

0

मुझे स्केच में स्वयं कोई समाधान नहीं मिला, लेकिन मुझे PHP का उपयोग करके एक आसान चलना पड़ा। स्केच में, मैं प्रत्येक समूह या पथ का नाम देता हूं जिसे मैं कक्षा के साथ शुरू करना चाहता हूं। डॉट, उदाहरण के लिए .person, और फ़ाइल निर्यात करें। जाहिर समूह अभी भी id=".person"

है और फिर मैं PHP का उपयोग पेज में .svg लोड और सभी आईडी वर्ग द्वारा एक बिंदु से शुरू की जगह: <?php echo str_replace('id=".', 'class="', file_get_contents('sample.svg')); ?>

मैं जानता हूँ कि यह आदर्श नहीं है, लेकिन मेरे मामले में काम करता है।

संबंधित मुद्दे