मैं इलस्ट्रेटर में एक एसवीजी बनाने की कोशिश कर रहा हूं और पृष्ठ के ऊपर और नीचे भरने के लिए पृष्ठभूमि छवि के रूप में इसका उपयोग कर रहा हूं लेकिन अभी भी एक div के अंदर है 950 पीएक्स चौड़ा है, और मुझे परेशानी का कोई अंत नहीं है।एक एसवीजी बनाना जो ब्राउज़र की ऊंचाई पर स्केल करता है लेकिन एक सेट चौड़ाई है
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
यह मेरा svg है, जैसा कि आप देख सकते हैं कि चित्रकार ने इसे चौड़ाई और ऊंचाई तत्व दिए हैं। मैं इन हटाया तो मैं उन्हें सीएसएस में सेट कर सकते हैं:
background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;
लेकिन कुछ नहीं:
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
}
मैं svg से आकार को दूर करने और इस तरह के रूप सीएसएस में शैलियों जोड़ने के विभिन्न विभिन्न संयोजनों की कोशिश की है मुझे काम लगता है। कोई विचार? कुछ बुनियादी हो सकता है मैं बस svgs के बारे में समझ में नहीं आता? व्यवहार, जब मैं इसे कुछ भी प्रदर्शित करने के लिए प्राप्त कर सकता हूं, ऐसा लगता है कि यह या तो आकार में पूरी तरह से सेट हो जाता है, या आकार में सेट हो जाता है और फिर जब मैं खिड़की को छोटा करता हूं तो यह चौड़ाई को कम करता है और पहलू अनुपात को बनाए रखता है।
इसका यह तथापि बड़ा खिड़की की तरह लग रहे करने वाला है:
लेकिन जब मैं खिड़की ऊंचाई बड़ा यह disapears के पक्ष बनाने के लिए, इस में
background-size: cover;
उपयोग कर रहा है सीएसएस, और svg में कोई आयाम नहीं है।
जब मैं तो जैसे एक सेट चौड़ाई जोड़ें:
background-size: 950px cover;
यह प्रदर्शित करता है इस तरह:
और अगर मैं कर खिड़की में छोटा होता है यह करता है:
जो विशेष रूप से परेशान है।
संपादित
सीएसएस और इतने
सीएसएस
/* Main Containers */
.center{
margin: 0px auto;
width: 1200px;
height: 100%;
}
#left{
width: 150px;
height: 100%;
display: block;
float: left;
background: #000000;
}
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: cover;
}
#right{
width: 100px;
height: 100%;
display: block;
float: left;
background: #000000;
}
एचटीएमएल
<body>
<div class="center">
<div id="left">
<!-- Header -->
<!-- END Header -->
</div>
<!-- Nav -->
<div id="nav">
</div>
<!-- END Nav -->
<div id="middle">
</div>
<div id="right">
</div>
<!-- Footer -->
<!-- END Footer -->
</div>
</body>
तो यह है कि आप इसे कैसे करते हैं। – bluefantail
अब तक आईव ने Google क्रोम 21, और एफएफ 14 में काम करने का परीक्षण किया – bluefantail