मेरे पेज में मेरे पास एक svg है जो इसके कंटेनर की ऊँचाई को बढ़ाता है। यह अन्य तत्वों को स्थानांतरित करता है ... क्या svg की ऊंचाई बदलना संभव है? अब svg तत्व एक वर्ग है और एक आयत बेहतर होगा क्योंकि ऊंचाई बहुत बड़ी है।

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" enable-background="new 0 0 30 30" xml:space="preserve" width="50%" height="11%">
    <path fill="none" stroke="white" stroke-miterlimit="10" d="M19.7,7.6C15.3,4,9.1,4.1,5.3,7.7c-3.2,3-4,8-2.1,12
    c2.1,4.4,7.1,6.6,11.3,5.7c2.6-0.5,4.3-2.1,5.1-2.9"/>
    <line fill="none" stroke="white" stroke-width="1.1572" stroke-miterlimit="10" x1="19.3" y1="7.3" x2="10.8" y2="15.5"/>
    <line fill="none" stroke="white" stroke-width="1.3426" stroke-miterlimit="10" x1="10.9" y1="14.8" x2="19.7" y2="23.2"/>
    <line fill="none" stroke="none" stroke-width="1.1322" stroke-miterlimit="10" x1="14.7" y1="15.4" x2="23.5" y2="7.1"/>
    <line fill="none" stroke="none" stroke-width="0.9577" stroke-miterlimit="10" x1="14.9" y1="14.9" x2="22.7" y2="22.6"/>
    <path fill="none" stroke="none" stroke-width="1.0915" stroke-miterlimit="10" d="M22.9,7.2c0.3,0.1,0.6,0.4,1,0.7
    c1.8,1.4,3.9,4.2,3.4,7.9c-0.4,3-2.4,5.6-5.2,6.7"/>

    <text x="20" y="18" fill="White" class="textsvg" font-size="10">MENU</text>
</svg>

[ Jsfiddle ] [1]

धन्यवाद!

0
Ty Yt 4 पद 2015, 19:12

3 जवाब

सबसे बढ़िया उत्तर

इस अपडेट की गई jsField को देखें: https://jsfiddle.net/qqzox761/1/

मैंने आपके svg से width और height निकाल दिया और व्यूबॉक्स को थोड़ा बदल दिया।

अब svg के इस कोड से आप css में साइज सेट कर सकते हैं।

2
mwl 4 पद 2015, 16:24

दृश्य विशेषता बदलें, यहाँ:

<svg ... viewBox="0 0 60 60" ...

इसका मतलब यह एक वर्ग एसवीजी है जो 0, 0 से शुरू होता है और प्रत्येक तरफ 60 के आकार का होता है। इसे बदलने से केवल एसवीजी दृश्य के पहलू अनुपात को प्रभावित होगा, आप सीएसएस का उपयोग करके इसकी चौड़ाई को पिक्सेल या प्रतिशत में अधिक सटीक रूप से निर्दिष्ट कर सकते हैं।

0
Mehdi Sabouri 4 पद 2015, 16:31

जैसा कि mwl ने उल्लेख किया है, आपको <svg> से चौड़ाई और ऊंचाई को हटाने की आवश्यकता है। ग्राफिक बनाने के लिए आपने जिस प्रोग्राम का उपयोग किया था, वह viewbox डेटा को स्वचालित रूप से जोड़ता है, जबकि mwl ने इसे संशोधित किया है, ऐसा लगता है कि जब आपने फ़ाइल को सहेजा था, तो आपके पास अतिरिक्त सफेद स्थान था। मैंने आपकी फ़ेल्ड यहाँ और फिर भी श्वेत स्थान के बिना पुनः निर्मित की। एसवीजी के बारे में याद रखने वाली महत्वपूर्ण बात यह है कि यह स्केलिंग के बारे में है जिसका अर्थ है, भाग में, पहलू अनुपात को संरक्षित करना पिक्सेल आयामों की तुलना में अधिक महत्वपूर्ण है। यदि आप अधिक जानकारी चाहते हैं तो सीएसएस-ट्रिक्स पर अमेलिया बेलानी-रॉयड्स द्वारा यह एक महान लेख है।

0
samurai_jane 4 पद 2015, 17:35