SVG patternTransform: भरण घुमाएँ, रूपरेखा रखें

स्थिर आकृति के भीतर SVG पैटर्न घुमाने के लिए pattern एलिमेंट पर patternTransform="rotate(...)" रखें। आकृति का अपना ट्रांसफ़ॉर्म न बदलें। दोहरती कलाकृति कहाँ पड़ती है यह खिसकाना हो तो उसी पैटर्न पर translation लें।

ये संपादन पेंट का निर्देशांक तंत्र खिसकाते हैं। आकृति वाला समूह घुमाने से दिखती ज्यामिति भी चलती है। हमारा मूल खोखला बैज अंतर दिखाता है: पेंट घूमे तो बाहरी रेखा सीधी रहती है, जबकि अलग पूरे-ऑब्जेक्ट नियंत्रण में बैज और खुला भाग दोनों तिरछे होते हैं।

वह एलिमेंट चुनें जिसे चलना चाहिए

वर्तमान patternTransform संदर्भ पैटर्न टाइल पर लागू transform list बताता है। SVG2 पैटर्न परिभाषा टाइल के निर्देशांक तंत्र और पेंट ट्रांसफ़ॉर्म समझाती है।

इस उदाहरण में रूपांकन छोटा असममित मुड़ा चिह्न है जो 24-इकाई टाइल में दोहरता है। पेंट लेने वाली आकृति अलग पाथ है: आयताकार खुले भाग वाला असममित बैज। भूमिकाएँ अलग रखने से संपादन का निर्णय स्पष्ट होता है।

हम सीधे SVG गुण लेते हैं। CSS transform कार्यान्वयन पर MDN की टिप्पणी यह वादा नहीं कि pattern-transform नाम की CSS property आपके गंतव्य में चलेगी।

बाहरी रेखा के भीतर पेंट घुमाएँ

पेंट घुमाने का पूरा शुरुआती उदाहरण खोलें

यह SVG pattern-emblem.svg सहेजकर ब्राउज़र में खोलें। यह स्वयंपूर्ण है; बाहरी चित्र या लाइब्रेरी नहीं। पैटर्न स्रोत बिंदु (100,80) के आसपास 30 डिग्री घूमता है; पेंट लेने वाले समूह में transform नहीं है।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

evenodd भरण नियम भीतरी आयत खुला रखता है। crossing-आधारित नियम के लिए fill-rule संदर्भ देखें। खुला भाग बैज पाथ का है, इसलिए दोहरता पेंट घुमाने से वह नहीं घूमता।

स्रोत में patternUnits और patternContentUnits दोनों स्पष्ट हैं। patternUnits संदर्भ टाइल निर्देशांक तंत्र बताता है। हमारी पैटर्न यूनिट गाइड टाइल आयाम और रूपांकन निर्देशांक विस्तार से बताती है। यहाँ transform अलग जाँचने के लिए उन्हें स्थिर रखा है; यह बिना सीम दोहराव डिज़ाइन करने का तरीका नहीं।

रोटेशन, translation और ज्यामिति नियंत्रण तुलना करें

शुरुआती उदाहरण की तीन प्रतियाँ बनाकर केवल बताया गुण बदलें:

1. मूल पेंट के लिए पैटर्न से patternTransform हटाएँ।
2. खिसके पेंट के लिए उसे patternTransform="translate(7 5)" से बदलें।
3. पूरे-ऑब्जेक्ट नियंत्रण के लिए pattern transform हटाकर पेंट लेने वाले g एलिमेंट पर transform="rotate(20 100 80)" जोड़ें।

Translated प्रति रूपांकन की दिशा रखती है, लेकिन बैज के भीतर उसकी जगह बदलती है। सीमा पर चिह्न पेंट आकृति में आ या उससे निकल सकता है। रोटेशन प्रति रूपांकन और उसका दोहराव जाल साथ घुमाती है; हर रूपांकन अपने केंद्र के आसपास अकेला नहीं घूम रहा।

ऑब्जेक्ट नियंत्रण के लिए transform गुण संदर्भ चुने बिंदु पर रोटेशन बताता है। वह समूह की ज्यामिति का प्रदर्शन बदलता है। उसका साधारण पैटर्न पेंट साथ जाता है; user-space पैटर्न यूनिट इस उदाहरण का पेंट वैश्विक रूप से स्थिर नहीं बनातीं।

परिणाम का निदान करते समय एक transform से शुरू करें। बाद में रोटेशन, translation और scaling जोड़ें तो SVG transform क्रम गाइड में क्रम जाँचें। संयुक्त transform अलग निर्देशांक प्रश्न लाते हैं जिससे यह नियंत्रित तुलना बचती है।

ज्यामिति और पिक्सेल अलग सत्यापित करें

हमने मूल चार रूप Chrome में 200×160 और 400×320 CSS पिक्सेल पर रेंडर किए। ब्राउज़र device pixel ratio 2 था। हर स्रोत डिकोड कर बताए परीक्षण आकार के बराबर backing आयाम वाले canvas पर भी ड्रॉ किया, ताकि स्क्रीनशॉट से अलग उसके पिक्सेल पढ़ सकें।

हर फ़ाइल में वही बैज d स्ट्रिंग और रूपांकन पाथ है: दो पाथ एलिमेंट और कोई इमेज एलिमेंट नहीं। transform अलग होने से पूरे फ़ाइल hash अलग हैं। बैज का स्थानीय ज्यामिति बॉक्स हर मामले में (30,25,140,110) है।

केवल वह स्थानीय बॉक्स पूरे-ऑब्जेक्ट बदलाव नहीं पकड़ता। इस बहुभुज बैज के पाँच बाहरी शीर्ष भी वास्तविक ब्राउज़र मैट्रिक्स से बदलकर दिखा विस्तार मापा। तालिका बड़े viewport को स्रोत इकाइयों में वापस सामान्यीकृत करती है:

दोनों परीक्षण आकारों पर सामान्यीकृत विस्तार मिले। ऑब्जेक्ट नियंत्रण वही d स्ट्रिंग रखता है, फिर भी दिखी ज्यामिति बदलती है। इसलिए स्रोत डेटा समान होना पाथ निर्माण बचे रहने का उपयोगी प्रमाण है, लेकिन दिखती बाहरी रेखा स्थिर होने का पर्याप्त प्रमाण नहीं।

केवल-पेंट रूपों में पूरे canvas पिक्सेल बफ़र हर आकार पर मूल से अलग थे। स्रोत (45,45) पर मूल नमूना टाइल बैकग्राउंड (244,240,228) और घुमे पेंट का नमूना टेराकोटा रूपांकन (193,90,56) था, दोनों में अल्फ़ा 255। Translation ने उस विशेष नमूने को नहीं बदला, भले पूरा बफ़र अलग था। एक नमूना बिंदु पेंट का खिसकाव चूक सकता है।

स्रोत (85,80) पर खुले भाग का अल्फ़ा आठों मामलों में शून्य था। हर आकार पर तीनों सीधे रूपों की पूर्ण अपारदर्शी पिक्सेल सीमाएँ भी समान थीं; वे थ्रेशोल्ड पिक्सेल सीमाएँ सटीक रूपरेखा-शीर्ष विस्तार की माप नहीं हैं। अवलोकन हमारे बनाए स्रोत और ब्राउज़र तक सीमित हैं, रेंडरर संगतता प्रमाणपत्र नहीं।

डिलीवरी से पहले सहेजा गंतव्य जाँचें

मूल बैज ज्यामिति संदर्भ रखें और पेंट प्रभाव अलग प्रति में रखें। दोहरता paint server हर दिखते रूपांकन को स्वतंत्र आकृति नहीं बनाता जिसे बाद का कटर या एडिटर चुन सके। गंतव्य को expanded ज्यामिति चाहिए तो वह विस्तार अलग तैयार और जाँचें। SVG संपादन गाइड व्यापक स्रोत बदलाव बताती है।

बाहरी रेखा अनपेक्षित घूमे तो पैटर्न बदलने से पहले उसके समूह और ancestor transforms जाँचें। कई inline प्रतियाँ अनपेक्षित एक पेंट साझा करें तो pattern ID और मेल खाते fill संदर्भ अलग नाम दें। हमारा तुलना परीक्षण उन ID को अलग रखता है; स्वतंत्र SVG फ़ाइलें दस्तावेज़-स्तर का वही resource namespace साझा नहीं करतीं।

अपना रूपांकन या बैज केवल PNG या JPG हो और संपादन योग्य रूपरेखा चाहिए तो PerfectVector से SVG तैयार करें, बाहरी रेखा और खुला भाग जाँचें और साफ़ मास्टर रखें। फिर SVG कोड में दोहराव बनाएँ और पेंट transform चुनें। वेक्टराइज़ेशन कलाकृति तैयार करता है; दोहराव डिज़ाइन, फेज़ चुनाव या गंतव्य का पैटर्न व्यवहार गारंटी नहीं करता। साफ़ मौजूदा पाथ सीधे पैटर्न संपादन में जा सकते हैं; वेक्टराइज़ेशन गाइड बताती है कि रास्टर रूपांतरण कब उपयोगी है।

अक्सर पूछे जाने वाले प्रश्न

क्या patternTransform बैज का पाथ डेटा बदलता है? इस उदाहरण में वह पैटर्न पेंट बदलता है। बैज की d स्ट्रिंग वैसी रहती है। पेंट लेने वाला समूह और ancestor transforms भी जाँचें, क्योंकि d बदले बिना दिखी ज्यामिति चल सकती है।

क्या बिना घुमाए पैटर्न खिसका सकते हैं? हाँ। translate(7 5) रूप पेंट की जगह बदलता है और रूपांकन दिशा रखता है। प्रभाव जाँचते समय टाइल आयाम और पेंट लेने वाली ज्यामिति स्थिर रखें।

पूरा समूह घुमाने पर पैटर्न भी क्यों घूमता है? समूह transform दिखी ज्यामिति और उसके पेंट को बदलता है। वह केवल pattern एलिमेंट पर transform लगाने से अलग ऑपरेशन है।

क्या दोहरते रूपांकन अलग संपादन योग्य पाथ हैं? हमारे स्रोत में paint server का एक रूपांकन पाथ और एक पेंट लेने वाला बैज पाथ है। दिखते दोहराव अलग बनाए पाथ एलिमेंट नहीं; गंतव्य को वैसा चाहिए तो अलग expand करके जाँचें।

स्रोत

1. MDN — patternTransform — Pattern transform सूची और गुण कार्यान्वयन की टिप्पणी।
2. W3C — SVG2 पैटर्न — टाइल निर्देशांक तंत्र और पेंट transform।
3. MDN — fill-rule — पेंट लेने वाले पाथ का even-odd खुला भाग।
4. MDN — transform — दिखती समूह ज्यामिति पर रोटेशन।
5. MDN — patternUnits — तुलना में स्थिर रखा स्पष्ट टाइल निर्देशांक तंत्र।