एसवीजी <defs> रिक्त स्थान

उत्पन्न करता है मैं अपने प्रोजेक्ट में एसवीजी का उपयोग कर रहा हूं, अब मुझे केवल <defs> के साथ एक वेब पेज के अंदर एक एसवीजी तत्व बनाना है। बाद में पृष्ठ में मुझे पहले परिभाषित वस्तुओं को कई बार उपयोग करना होगा। समस्या परिभाषा के साथ वस्तु में निहित है, वास्तव में यह पृष्ठ में एक खाली स्थान बनाता है।एसवीजी <defs> रिक्त स्थान

<!DOCTYPE html> 
<html> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <defs> 
       <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
      </defs> 
     </svg> 

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> 
      <use x=0 y=0 xlink:href="#star"> 
     </svg> 
    </body> 
</html>

मैं दोनों फ़ायरफ़ॉक्स और क्रोम के साथ समस्या है: इस कोड का प्रयास करें। मुझे आईई के बारे में परवाह नहीं है।

स्रोत

2013-05-24 Max Markson

को परिभाषित करने <svg> टैग करने के लिए शून्य आयाम जोड़ें:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

आप न तो व्यूपोर्ट और न ही आयाम सेट के रूप में, मुझे लगता है कि, ब्राउज़र एसवीजी के लिए यहाँ है और इस तरह मूल्यों अनुमान लगाने के लिए एक "डिफ़ॉल्ट आकार" में जिसके परिणामस्वरूप की कोशिश की , इस प्रकार खाली जगह प्रस्तुत करना।

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

स्रोत

2013-05-24 07:21:51 Sirko

स्थान कम हो गया है लेकिन यह गायब नहीं हुआ है। उपयोग के बाद परिभाषा को स्थानांतरित करने का प्रयास करें, आप देखेंगे कि उपयोग बढ़ता है और रिक्त स्थान नीचे चला जाता है। –

@ मैक्समार्कसन मेरे एफएफ और क्रोम में ' '-एसवीजी पूरी तरह से गायब हो गया। क्या आप निश्चित हैं, कुछ पैडिंग या मार्जिन कहीं भी लागू नहीं हैं? – Sirko

इस छवियों को जांचें: http://imageshack.us/a/img819/2999/defsafter.png http://imageshack.us/a/img826/1323/defsbefore.png –

दो कारण यह हो रहा है है:

आयाम

संपादित

वैकल्पिक रूप से, <defs> तत्व के साथ <svg> करने के लिए display: none सेट

<svg>display:inline

<svg> टैग शुरू में ले लिया अंतरिक्ष लेकिन एक छोटे से हिस्से का सबसे छुपा देगा रहेगा आयाम जोड़ा जा रहा है के रूप में प्रदान की जाती हैं।

display:none सेट करना <svg> तत्वों में संदर्भित किसी भी पैटर्न/ग्रेडियेंट/आदि को छिपाएगा और इसलिए उचित नहीं है।

इसे पूरी तरह छुपाने के लिए, <svg> टैग को display:block के रूप में सेट करें। इसके बाद यह पहले दिए गए शून्य-लंबाई आयामों का सम्मान करेगा।

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;"> 
    <defs> 
     <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
    </defs> 
</svg>

स्रोत

2016-06-02 16:33:04 jussinen

यह केवल' चौड़ाई =" 0 "और' ऊंचाई = "0" 'को 'प्रदर्शन के साथ संयोजन में सेट करने के बाद भी काम करता है: ब्लॉक 'या' स्थिति: पूर्ण '। – Dominik

एसवीजी <defs> रिक्त स्थान

उत्तर

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