SVG ClipPath इकाइयाँ: कस्टम आकृति लक्ष्य में फ़िट करें

क्लिपिंग आकृति लक्ष्य की सीमा के साथ खिंचनी हो तो clipPathUnits="objectBoundingBox" दें। पहले उसके निर्देशांक सामान्य करें। स्पष्ट स्थान या अनुपात बचाने वाला समान पैमाना चाहिए तो userSpaceOnUse दें।

केवल एट्रिब्यूट बदलने से सैकड़ों इकाइयों में बना पाथ शून्य से एक के बीच नहीं आता। लगभग पूरा क्लिप लक्ष्य से बाहर जा सकता है। यह मार्गदर्शिका मूल बुकमार्क आकृति से निर्देशांक बदलाव, बनी विकृति और हीरे की खुली जगह चौकोर रखने वाली केंद्रित फ़िट दिखाती है।

क्लिपिंग दृश्यता नियंत्रित करती है। यह अंतर्निहित पाथ को काटकर नई संपादन योग्य ज्यामिति नहीं बनाती। साफ़ SVG आकृति हो तो सीधे दें; रास्टर से आकृति वापस चाहिए तभी ट्रेस प्रासंगिक है।

आकार बदलने से पहले निर्देशांक तंत्र चुनें

डिफ़ॉल्ट userSpaceOnUse है। उसके क्लिप निर्देशांक संदर्भ देने वाले तत्व के उपयोगकर्ता निर्देशांक तंत्र के हैं। objectBoundingBox में लक्ष्य का ऊपर बायाँ किनारा (0, 0) और नीचे दायाँ (1, 1) है। clipPathUnits संदर्भ देखें।

लक्ष्य बॉक्स आवश्यक नहीं कि बाहरी SVG का viewBox हो। किसी समूह पर क्लिप लगाने में उस समूह की सीमाएँ इस्तेमाल होती हैं, जो उसके भीतर के आयत की सीमाओं से अलग हो सकती हैं। पहले परीक्षण का परिणाम आसानी से अनुमानित रखने के लिए ज्ञात आयाम वाले आयत पर सीधे क्लिप दें।

चौड़े और लंबे लक्ष्य तुलना करें

बुकमार्क बाहरी सीमा x=20, y=10, width=100, height=100 है। हीरा उसी पाथ का दूसरा उपपाथ है। परीक्षण उसे स्थानीय SVG इकाई के 200 × 120 और 120 × 200 आयतों पर देता है।

बीच का कॉलम हर लक्ष्य सीमा भरता है, लेकिन हीरा चौड़ा या लंबा होता है। दायाँ हीरा और नीचे कटाव बचाकर लंबे अक्ष पर जगह छोड़ता है। सभी 6 खुली जगहें पारदर्शी रहती हैं।

पूरा उदाहरण clippath-comparison.svg सेव करके ब्राउज़र में खोलें। कॉलम चित्र क्रम में हैं। ऊपर चौड़े और नीचे लंबे आयत हैं। प्रदर्शन खिसकाव नमूने सजाते हैं, स्थानीय लक्ष्य आयाम नहीं बदलते।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

नीला-हरा रंग आयतों का है। क्लिपिंग पाथ दृश्य आउटलाइन देता है। स्क्रीनशॉट इसी SVG के आसपास लेबल और चौखाने जोड़ता है; स्वतंत्र फ़ाइल का बैकग्राउंड पारदर्शी है।

स्रोत के मूल बिंदु सहित उसकी सीमाएँ सामान्यीकृत करें

(minX, minY, width, height) स्रोत सीमा में (x, y) बिंदु के लिए गणना करें:

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

यहाँ (x - 20) / 100 और (y - 10) / 100 है। box परिभाषा का मैट्रिक्स पाथ डेटा फिर लिखे बिना दोनों काम करता है:

matrix(0.01 0 0 0.01 -0.2 -0.1)

यह (20, 10) को (0, 0) और (120, 110) को (1, 1) करता है। मूल बिंदु घटाए बिना 100 से भाग देने पर लक्ष्य में आकृति खिसकी रहती। फिर बॉक्स मैपिंग सामान्य परिणाम लक्ष्य चौड़ाई और ऊँचाई में स्वतंत्र बढ़ाती है।

सामान्य करने वाली ज्यामिति की वास्तविक सीमा दें। viewBox में जानबूझकर खाली जगह हो सकती है, इसलिए उसके आयाम बाहरी आकृति की सीमाओं के बराबर होना ज़रूरी नहीं है। खाली जगह बचानी हो तो दोनों माप भूल से मिलाने के बजाय viewBox आयत जानबूझकर दें।

नेस्टेड ट्रांसफ़ॉर्म वाली इंपोर्ट की गई कलाकृति एक समान निर्देशांक तंत्र में मापें और सामान्य करें। प्रभाव का सही हिसाब न कर सकें तो कच्चा पाथ डेटा कॉपी करने से पहले संपादक में ट्रांसफ़ॉर्म हल करें। SVG संपादन प्रक्रिया देने से पहले पाथ और समूह जाँचना बताती है।

एक पैमाने से अनुपात बचाएँ

स्थानीय (0, 0) के लक्ष्य आयत की चौड़ाई W और ऊँचाई H हो तो दें:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

चौड़ा लक्ष्य s=1.2, tx=16 और ty=-12 देता है। क्लिप x=40..160 और y=0..120 में है। लंबा लक्ष्य s=1.2, tx=-24 और ty=28 देकर क्लिप x=0..120 तथा y=40..160 में रखता है।

ये userSpaceOnUse के स्पष्ट मैट्रिक्स हैं, इसलिए स्थानीय लक्ष्य आयाम बदलें तो फिर गणना करें। पूरे SVG को अलग CSS आकार में दिखाना पूरी रचना साथ बदलता है। भीतर आयत चौड़े से लंबे करना अलग क्रिया है।

गणना अशून्य स्रोत चौड़ाई-ऊँचाई और बिना अनदेखे घुमाव या तिरछेपन मानती है। यह भीतर फ़िट है: जगह बचना अपेक्षित है। लक्ष्य भरना चिह्न अनुपात से ज़्यादा महत्वपूर्ण हो तो बॉक्स इकाइयों से खींचना उचित है।

क्लिप ज्यामिति में खुली जगह रखें

उदाहरण हर clipPath के भीतर use पर clip-rule="evenodd" देता है। संदर्भ पाथ बाहरी बुकमार्क और हीरा उपपाथ दोनों रखता है। नियम संयुक्त आकृति के क्लिप में आने वाले क्षेत्र तय करता है।

नीला-हरे आयत पर clip-rule देने से क्लिप आकृति नियम सेट नहीं होता। स्रोत रंगने का fill-rule भी क्लिप नियम की जगह नहीं। MDN का clip-rule संदर्भ clipPath के भीतर दायरा बताता है।

अलग सफ़ेद हीरा जोड़कर क्लिप से घटने की उम्मीद न करें। क्लिपिंग पाथ के चाइल्ड तत्वों की आकृतियाँ दृश्य क्षेत्र में मिलती हैं; उनके रंग काले-सफ़ेद मास्क मान नहीं हैं। ऐसे छेद में संयुक्त पाथ और इच्छित घुमाव नियम दें। भरे SVG छेद मार्गदर्शिका मूल पाथ संरचना समझाती है।

आंशिक पारदर्शी किनारे या चमक आधारित दृश्यता चाहिए तो एक इमेज पर clipPath और SVG मास्क तुलना करें। ज्यामितीय सीमा में क्लिप उपयोगी है; मास्क अलग दृश्यता मॉडल देता है। CSS से रंगे एक रंग आइकन के लिए SVG CSS मास्क मार्गदर्शिका देखें।

सीमा और एक्सपोर्ट परिणाम जाँचें

दृश्य स्ट्रोक होने पर भी क्षैतिज या लंबवत रेखा का ज्यामितीय बॉक्स शून्य ऊँचाई या चौड़ाई हो सकता है। ऐसे लक्ष्य में objectBoundingBox न दें और सामान्य करते समय शून्य स्रोत आयाम से भाग न करें। SVG निर्देशांक विनिर्देश गणना से स्ट्रोक चौड़ाई छोड़ता और इन विशेष मामलों की चेतावनी देता है।

देने से पहले:

1. पुष्टि करें कि संदर्भित क्लिप ID दस्तावेज़ में मौजूद है और किसी दूसरे तत्व की ID से नहीं मिलता।
2. सबसे छोटी खुली जगह सहित चौड़े-लंबे लक्ष्य तुलना करें।
3. इच्छित निर्देशांक तंत्रों में स्रोत और लक्ष्य सीमा दोनों देखें।
4. एक्सपोर्ट SVG सेव करके इस्तेमाल करने वाले ऐप में खोलें।
5. क्लिप संपादन योग्य चाहिए तो मूल ज्यामिति रखें।

CSS Masking विनिर्देश कहता है कि क्लिपिंग रेंडर बदलती है, मूल ज्यामिति नहीं। इसलिए कटर या ज्यामिति प्रसंस्करण ऐप को वास्तविक पाथ इंटरसेक्शन या दूसरी संपादक क्रिया चाहिए हो सकती है। उस ऐप में बने पाथ पुष्टि करें; सही ब्राउज़र पूर्वावलोकन अकेला कट तैयार फ़ाइल नहीं सिद्ध करता।

ज़रूरत पर रास्टर बाहरी आकृति वापस लाएँ

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

मौजूदा वेक्टर मूल हो तो रखें। इस उदाहरण जैसा सरल बुकमार्क सीधे बनाया जा सकता है। वेक्टराइज़ेशन क्लिप इकाइयाँ नहीं चुनता, सीमा सामान्य नहीं करता और स्थायी Boolean कट नहीं करता। व्यापक स्रोत चुनाव के लिए इमेज वेक्टराइज़ेशन परिचय पढ़ें।

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

क्या objectBoundingBox आकृति अनुपात बचाता है? नहीं। यह सामान्य क्लिप लक्ष्य चौड़ाई और ऊँचाई में स्वतंत्र मैप करता है। अनुपात बचाना हो तो userSpaceOnUse में समान पैमाना दें।

clipPathUnits बदलने से आकृति क्यों छिपती है? पाथ निर्देशांक मूल स्रोत इकाइयों में रह सकते हैं। स्रोत के मूल बिंदु सहित लक्ष्य-सापेक्ष निर्देशांक तंत्र में सामान्यीकृत करें या userSpaceOnUse रखकर स्पष्ट स्थान दें।

क्या क्लिपिंग SVG के छिपे हिस्से मिटाती है? नहीं। यह मूल ज्यामिति रखते हुए रेंडर बदलती है। वितरण फ़ाइल में स्थायी कटी सीमाएँ चाहिए तो उपयुक्त पाथ संपादन करें।

स्रोत

1. MDN — clipPathUnits — निर्देशांक चुनाव और डिफ़ॉल्ट उपयोगकर्ता स्थान व्याख्या।
2. MDN — clip-rule — क्लिप पाथ में घुमाव नियम का स्थान।
3. W3C — SVG निर्देशांक तंत्र — बॉक्स मैपिंग, स्ट्रोक छोड़ना और शून्य आयाम सीमाएँ।
4. W3C — CSS Masking — क्लिप ज्यामिति, संयुक्त बाहरी आकृतियाँ और अपरिवर्तित मूल पाथ।

क्लिप रास्टर चिह्न से शुरू हो तो PerfectVector से उसका SVG तैयार करें, बाहरी आकृति और खुली जगह देखें, फिर खींचने या समान फ़िट चुनने से पहले दोनों लक्ष्य अनुपात परखें।