फ़ायरफ़ॉक्स में पहलू अनुपात को सम्मानित किए बिना मैं एक एसवीजी पृष्ठभूमि-छवि को कैसे स्केल करूं?

Question

मुझे एक सीएसएस background-image तरल ऊंचाई और चौड़ाई के तत्व पर सेट है। यह एक एसवीजी है, और इरादा व्यवहार इस तत्व के क्षेत्र की पूरी तरह से कवर करने के लिए आवश्यक दिशाओं में फैलाने के लिए है। क्रोम, सफारी, और यहां तक ​​कि बुरा ol 'इंटरनेट एक्सप्लोरर 9 में, स्केलिंग काम करता है मैं कैसे हैं:

लेकिन फ़ायरफ़ॉक्स (डेस्कटॉप और मोबाइल दोनों) के भीतर, उत्पादन और अधिक इस तरह है:

कुछ खोदने के बाद, ऐसा लगता है कि फ़ायरफ़ॉक्स अन्य ब्राउज़रों की तुलना में एसवीजी प्रतिपादन के बारे में कठोर होना चाहता है, जिसमें यह spec के नवीनतम संस्करण का बारीकी से पालन करता है। (ओपेरा मिनी भी इस पृष्ठभूमि छवि (जब सक्षम है) को प्रतिपादित करने में विफल रहता है, यह से नीचे स्केल नहीं करता है, और गर्मी के तूफान की ईमानदारी के साथ चश्मा से निपटने के प्रेस्टो इंजन की परंपरा को देखते हुए, यह उसी अद्यतन दृष्टिकोण की अपेक्षा कर सकता है फ़ायरफ़ॉक्स करता है।)

आप लाइव पेज देख सकते हैं जो मैं http://ti.gt/ पर काम कर रहा हूं। मैं भी कोड मैं नीचे के साथ काम कर रहा हूँ प्रदान की है:

एचटीएमएल

<h1 class="blog-title-wrapper"> 
    <a href="/" class="blog-title pop-out">{Title}</a> 
</h1> 

सीएसएस

.blog-title { 
    background: none; 
    color: #fff; 
    font: normal normal 4em "Alternate Gothic", sans-serif; 
    margin: 0 0 0 .1em; 
} 

.blog-title-wrapper { 
    margin: -1px 0 0 0; 
    padding-bottom: 20%; 
    background: #d23e2c; 
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMzMzIDc1MCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJtIDAsMCAxMzMzLDAgMCwzMjAuNTMgLTcyLjY3LDQ4LjQyIDUyLjQ1LDM3LjU3IC0xMjYuMzEsNTIuODQgNTAuMTMsMTM2LjE5IC0xOS45OCwzNy4yNiAtMzkuNDcsLTExLjcxIC0zOC43NSw0MC40NyAtNjMuMzIsLTEyLjA3IC0zMC40NCwtMTM1LjYgLTcuOTQsMy4yOCAyNC43NCwxNDAuOTUgLTM4LjEzLDMwLjI2IC00NC4zNSwtMy4zMyAtMzUuODMsMjMuMzkgLTQ4LjkzLC0xMy4yMiAtMzguMjQsLTE0MS40OCAtMTAuNTcsMy42OCA2LjIsMTQ4Ljk3IC0zMy44OCwyMC40NiAtMjUuMjYsLTEzLjg1IC0yMi40OCwzMS40OSAtMjcuMzYsLTIyLjMyIC0zMiwyNC4zNCBMIDY4MC41NSw3MTguNiA2NjQuNyw1NjQgbCAtMTcuMDgsMC45MSAtMjEuODgsMTU5LjczIC0yOS4xNywyNS4zNiAtMS43MiwwIC0yNy44NCwtMjMuMDIgLTIzLjMsMTMuODggLTIxLjYsLTIwLjcxIC0yMi4zMSwxMS4yMSAtMjQuMTMsLTIzLjE4IDEwLjE0LC0xNTUuNCAtNC43NywtMi4yIC0zMy42NCwxNTcuNjMgLTI5Ljk3LDE0LjIxIC04LjgsLTEuMTcgLTM1LjIxLC0yMC4zOCAtMzQuMTcsMTAuNDEgLTguNjMsLTIuNzkgLTMyLjkzLC0yNi42OCAyNC45NiwtMTUxLjU0IC0xMC42NiwtMi4wOSAtNDUuNjIsMTQwLjM0IC0zMi40OSwxNS4zMyAtNTUuMDgsLTQwLjM2IC0zOC45OSw5LjA3IEwgMTA2LjgyLDYxOC40MyAxNTMuMjYsNDg2LjA2IDguODUsNDI4LjU3IDYzLjkzLDM4MC44NiAwLDMzMy4wNSB6IiBmaWxsPSIjZDIzZTJjIi8+PHBhdGggZD0iTSAzMDIuNzYsMzQuNTggNDY0Ljk4LDE1OC45MyA0MjMuMDcsMzY3LjM3IDI3Ny4yNywyODQuMjIgMTgxLjc5LDMzMi42NiA4MS41NywxNDMuMDggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gMTA3OC45Miw0MC4xMSAxOTYuOSw3Ny44NCAtMTA5Ljk5LDI1My4wNyAtMTAzLjg5LC02MC4wNyAtMTUuMzcsMS45IC0xMTkuMDUsNDkuMjIgLTI1LjQ3LC0yMjcuMzQgeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNjA1LjY1LDMyMi43NCAzLjYsMTA3LjE5IC0xMDAuNzYsMS41NyA2NC41OSwtMzMuMzggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNzE4LjUxLDMyNS4zIDMzLjMzLDc3LjAyIDc5LjQxLDI4LjI3IC0xMTkuOSwxOS40OSB6IiBmaWxsPSIjYTgzMTIzIi8+PC9zdmc+") no-repeat 100% 100%, none; 
} 

डाटा यूआरआई चिपका बिंदु होने के लिए प्रकट नहीं होता है , लेकिन यहां डीकोडेड एसवीजी फ़ाइल है:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1333 750" version="1.1"> 
    <path d="m 0,0 1333,0 0,320.53 -72.67,48.42 52.45,37.57 -126.31,52.84 50.13,136.19 -19.98,37.26 -39.47,-11.71 -38.75,40.47 -63.32,-12.07 -30.44,-135.6 -7.94,3.28 24.74,140.95 -38.13,30.26 -44.35,-3.33 -35.83,23.39 -48.93,-13.22 -38.24,-141.48 -10.57,3.68 6.2,148.97 -33.88,20.46 -25.26,-13.85 -22.48,31.49 -27.36,-22.32 -32,24.34 L 680.55,718.6 664.7,564 l -17.08,0.91 -21.88,159.73 -29.17,25.36 -1.72,0 -27.84,-23.02 -23.3,13.88 -21.6,-20.71 -22.31,11.21 -24.13,-23.18 10.14,-155.4 -4.77,-2.2 -33.64,157.63 -29.97,14.21 -8.8,-1.17 -35.21,-20.38 -34.17,10.41 -8.63,-2.79 -32.93,-26.68 24.96,-151.54 -10.66,-2.09 -45.62,140.34 -32.49,15.33 -55.08,-40.36 -38.99,9.07 L 106.82,618.43 153.26,486.06 8.85,428.57 63.93,380.86 0,333.05 z" fill="#d23e2c"/> 
    <path d="M 302.76,34.58 464.98,158.93 423.07,367.37 277.27,284.22 181.79,332.66 81.57,143.08 z" fill="#a83123"/><path d="m 1078.92,40.11 196.9,77.84 -109.99,253.07 -103.89,-60.07 -15.37,1.9 -119.05,49.22 -25.47,-227.34 z" fill="#a83123"/> 
    <path d="m 605.65,322.74 3.6,107.19 -100.76,1.57 64.59,-33.38 z" fill="#a83123"/> 
    <path d="m 718.51,325.3 33.33,77.02 79.41,28.27 -119.9,19.49 z" fill="#a83123"/> 
</svg> 

मैंने फ़ायरफ़ॉक्स को मेरी मांगों को स्वीकार करने के लिए विभिन्न रणनीतियों की कोशिश की है, लेकिन अभी तक कोई भी सफल नहीं हुआ है। मैंने this document that's about exactly this topic पर देखा है, लेकिन मैं इससे कोई सलाह निकालने में असमर्थ हूं।

Answer 1

मुझे background-size सेट करने की आवश्यकता है।

background-size: 100% 100%; 

"सख्त प्रतिपादन मॉडल" के पृष्ठ को यह जानकारी आकार, बल्कि आंतरिक रूप से एसवीजी भीतर से टाल दिया गया था भाग: यह टुकड़ा चाल किया था।

मैंने सोचा कि मैं थाbackground आशुलिपि के अंदर इस परिभाषित, लेकिन जाहिरा तौर बजाय मैं background-position को निर्दिष्ट किया गया था। मैं इसके बारे में बहुत मूर्खतापूर्ण महसूस करता हूं, लेकिन यह सीएसएस में सबसे ग़लत और सबसे अधिक उग्र शॉर्टेंड प्रतीत होता है।

Answer 2

नोट ... आप बेस 64 इनकोडिंग पृष्ठभूमि के संस्करण का उपयोग नहीं से बेहतर हो सकती है ... के रूप में इतना:

.blog-title { 
 
    background: none; 
 
    color: #fff; 
 
    font: normal normal 4em "Alternate Gothic", sans-serif; 
 
    margin: 0 0 0 .1em; 
 
} 
 

 
.blog-title-wrapper { 
 
    margin: -1px 0 0 0; 
 
    padding-bottom: 20%; 
 
    background: #333; 
 
    background-size: 100% auto; 
 
    background-image: url("data:image/svg+xml;charset=UTF-8, %3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1333 750'%3E%3Cpath fill='%23d23e2c' d='M0 0h1333v320.5l-72.7 48.4 52.5 37-126.3 53 50 136-20 37-39.3-12-38.8 40.4-63.3-12-30-135.7-8 3 25 141-38 30.3-44-3-36 23.4-48.7-13-39-141-10.5 3.6 6.2 149-34 20.5-25-14-22.7 31-27.3-22-32 24-30-28L665 563l-17 1-22 159.4-29 25.4h-2l-28-23-23.3 14-21.7-21-22 11.6-24-23.4 10-155-4.8-2.2-33.6 158-30 14.2-8.8-1-35.2-20.5-34 10.2-8.8-3-33-27 25-151.7-10.6-2-45.6 140-32.6 16-55.2-40.5-39 9-33-34 46.5-132L8.8 429l55-47.8L0 333z'/%3E%3Cpath fill='%23a83123' d='M302.8 34.6L465 159l-42 208.4-145.7-83.2-95.5 48.5L81.6 143zM1079 40l196.8 78-110 253-104-60-15.2 1.8-119 49.3L902 135zM605.6 322.7l3.6 107.2-100.7 1 64.5-33zm113 2.6l33.2 77 79.5 28.3-120 19.5z'/%3E%3C/svg%3E"); 
 
}

<h1 class="blog-title-wrapper"> 
 
    <a href="/" class="blog-title pop-out">{Title}</a> 
 
</h1>