मेरे पास एक एसवीजी पथ है जिसे मैं एसवीजी दृश्य में क्षैतिज रूप से केंद्रित करना चाहता हूं, इससे कोई फर्क नहीं पड़ता कि खिड़की की चौड़ाई कैसे बदलती है (जैसे पृष्ठभूमि आईएमजी #तरल में करता है)। मुझे अभी तक कोई समाधान नहीं मिला ..

.container {
    width: 100%;
}

#liquids{
    background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) no-repeat scroll center 0 transparent;
    width: 100vw;
    height: 100vh;
}
#p3 {
    fill: #0400ff;
}
<div class=container">
    <svg id="liquids">
        <g class="p3-g">
            <path id="p3" d="M 200 200 C 50 350 100 0 350 50 C 550 100 650 100 650 250 C 650 450 450 300 450 350 C 450 550 250 150 200 200 Z"/>
        </g>
    </svg>
</div>

मैं एसवीजी के लिए काफी नया हूं, अगर मुझे यहां स्पष्ट याद आ रही है तो मुझे क्षमा करें।

0
Wizzardzz 23 अक्टूबर 2019, 12:00

1 उत्तर

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

एसवीजी को अपने जैसा बड़ा न बनाएं, ऊंचाई/चौड़ाई रखें जो व्यूबॉक्स को कम करके और छवि चौड़ाई के बराबर max-width पर विचार करके अपनी सामग्री को फिट करे, फिर आप इसे किसी भी केंद्रित तकनीक का उपयोग करके आसानी से केंद्रित कर सकते हैं:

.container {
    width: 100%;
    background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) no-repeat top ;
    height: 100vh;
}
svg {
  display:block;
  max-width:500px;
  margin:auto;
  border:1px solid; /* to illustrate*/
}
#p3 {
    fill: #0400ff;
}

body {
  margin:0;
}
<div class="container">
    <svg id="liquids" viewBox="110 40 550 370">
        <g class="p3-g">
            <path id="p3" d="M 200 200 C 50 350 100 0 350 50 C 550 100 650 100 650 250 C 650 450 450 300 450 350 C 450 550 250 150 200 200 Z"/>
        </g>
    </svg>
</div>
2
Temani Afif 23 अक्टूबर 2019, 10:14