SVG => मुखौटा

परिचय

mask तत्व आपको नरम किनारों के साथ "क्लिप" करने की अनुमति देता है। आप पाठ सहित बहुआयामी तत्वों से मास्क की रचना कर सकते हैं। एक मुखौटा जो सफेद है, सब कुछ पूरी तरह से अपारदर्शी होगा। जो कुछ भी काला है वह पूरी तरह से पारदर्शी होगा। सफेद और काले रंग के बीच का मान अर्ध पारदर्शी होगा।

टिप्पणियों

ज्ञात हो कि मास्क एक कम्प्यूटेशनल महंगा ऑपरेशन है। गणना मास्क के क्षेत्र में प्रत्येक पिक्सेल के लिए किए जाने की आवश्यकता है। इसलिए जितना हो सके अपने मास्क के क्षेत्र को छोटा रखें।

मूल मुखौटा

बीच में एक गोल छेद के साथ एक हरे रंग की परत छवि पृष्ठभूमि को दिखाती है।

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="45" fill="black"/>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

पाठ और आकृतियों के साथ जटिल उदाहरण

एक जटिल मुखौटा के साथ एक हरे रंग की परत उस पर लागू होती है जो पृष्ठभूमि छवि दिखाती है।

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="myMask0">
        <circle cx="50" cy="50" r="30" fill="white"/>
    </mask>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <text x="5" y="60" font-size="40">Mask</text>
        <circle cx="50" cy="50" r="30" fill="black"/>
        <text x="5" y="60" font-size="40" mask="url(#myMask0)" fill="white">Mask</text>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

अर्ध पारदर्शिता

4 छेदों के उपयोग से बनाई गई 4 छिद्रों के साथ एक हरे रंग की आयत (फिर से ...) जिसके परिणामस्वरूप 4 अलग-अलग ओपेसिटीज हैं।

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="25" cy="25" r="20" fill="black"/>
        <circle cx="75" cy="25" r="20" fill="#333"/>
        <circle cx="25" cy="75" r="20" fill="#666"/>
        <circle cx="75" cy="75" r="20" fill="#999"/>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

एक ढाल के साथ एक मुखौटा

नरम किनारों के साथ बीच में एक छेद के साथ एक हरे रंग की आयत।

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <radialGradient id="rg">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="white"/>
    </radialGradient>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="45" fill="url(#rg)"/>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

SVG
मुखौटा

खोज…