एसवीजी

Question

में स्केल-स्वतंत्र दोहराने वाली पृष्ठभूमि छवियां मेरे पास एक प्रश्न है और मुझे उम्मीद है कि कोई मेरी मदद कर सकता है। जो मैं खोज रहा हूं वह एसवीजी छवियों में सीएसएस संपत्ति background-repeat के बराबर है। क्या भरने वाली रास्टर छवियों को भरने के लिए कोई हैक है? इसका मुद्दा यह है कि मैं एक वेबसाइट तैयार कर रहा हूं और इसे स्केलेबल बनाने के लिए एसवीजी ग्राफिक्स के साथ प्रयोग करना चाहता हूं। तो जब उपयोगकर्ता ज़ूम करता है तो सब कुछ पूरी तरह से तेज रहता है। हालांकि, मुझे "दानेदार" रास्टर बनावट की भी आवश्यकता है। अब अगर मैं Illustrator में एक बनावट के रूप में एक रास्टर चित्र लागू करते हैं और एक एसवीजी के रूप में सहेज, बनावट फ़ाइल के साथ ज़ूम और एक सूक्ष्म अनाज पिक्सल के बदसूरत ब्लॉक हो जाता है। अब मैं ज़ूम पर स्केल करने की बजाय छवि को दोहराने की संभावना तलाश रहा हूं। क्या किसी को यह हासिल करने के लिए हैक पता है?

एक और संभावना के बारे में मैं एसवीजी से बाहर रास्टर चित्र ले रहा था और सीएसएस के माध्यम से एक पृष्ठभूमि के रूप में लागू करने के बारे में सोचा। दुर्भाग्य से पृष्ठभूमि छवि को सीएसएस या जावास्क्रिप्ट के माध्यम से ज़ूम करने से रोकने का कोई तरीका नहीं लगता है। जो सही समझ में आता है क्योंकि सामग्री तत्वों पर ऐसा करने वाला कोई भी व्यक्ति नरक तक पहुंच जाएगा।

Answer 1

SVG Patterns देखें। मुझे विश्वास है कि आप patternUnits और patternContentUnits उपयोग कर सकते हैं अपने जूम-स्वतंत्र व्यवहार प्राप्त करने के लिए, लेकिन यह सत्यापित नहीं किया है।

Answer 2

मैं पृष्ठभूमि आकार मान ईएमएस के बजाय प्रतिशत में सेट का उपयोग करके यह काम करने के लिए सक्षम था। मैं अधिक बड़े आकार में एसवीजी (30px एक्स गुणित 90px) बनाया और ईएमएस का उपयोग कर अपने लक्षित आकार पर स्केल।

body { 
    font-size: 15px; 
    background: #fff url(stripe_pattern.svg) repeat-x left top; 
    -webkit-background-size: 0.5em, 0.5em; 
    -moz-background-size: 0.5em, 0.5em; 
    -o-background-size: 0.5em, 0.5em; 
    background-size: 0.5em, 0.5em; 
} 

कम से कम आधुनिक ब्राउज़र के लिए काम करता है। आईई रास्टर संस्करणों पर वापस आ सकता है।