एसवीजी के साथ चयन योग्य पाठ के साथ एक छवि मास्किंग - संभव है?

Question

एक साफ टाइपोग्राफिक प्रभाव अक्सर पत्रिकाओं आदि में शीर्षकों को देखा जाता है, वास्तव में बोल्ड फ़ॉन्ट का चयन करना और टेक्स्ट के अंदर एक छवि डालना है। यहां प्रभाव का एक यादृच्छिक उदाहरण दिया गया है:

वेब डिज़ाइन में, सादे HTML/css/js के साथ ऐसा करने का कोई तरीका नहीं है। यह फ़्लैश या बिटमैप छवि के साथ किया जा सकता है लेकिन उन तकनीकों में स्पष्ट रूप से कुछ बड़ी कमीएं हैं।

मुझे आश्चर्य है कि एसवीजी के साथ ऐसा करना संभव है या नहीं? मैंने कभी भी एसवीजी का उपयोग नहीं किया है, लेकिन यदि यह संभव है, तो मेरे सिर को लपेटने की कोशिश करने लायक हो सकता है।

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

Answer 1

एसवीजी के साथ ऐसा करना संभव है, हालांकि आपको मास्किंग करने की आवश्यकता नहीं है, आप कर सकते हैं सिर्फ एक पैटर्न के रूप में छवि निर्दिष्ट करें:

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450"> 
     <image xlink:href="daisy-grass-repeating-background.jpg" x="0" y="0" 
      width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php--> 
    </pattern> 
</defs> 

तब संदर्भ है कि आपके पाठ में fill के रूप में:

<text fill="url(#img1)"> 

मैं an example किया है, सबसे दर्दनाक हिस्सा बाहर क्या patternUnits औरलगाना था 0 वास्तव में किया, this MDC article was helpful।

पाठ ओपेरा और क्रोम में चयन है (और, मुझे लगता है, सफारी) नहीं, बल्कि Firefox वजह से ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (बग अब तय हो गई है, यह फ़ायरफ़ॉक्स 24 या तो में काम करने की उम्मीद)। एसवीजी आईई में काम नहीं करता है (वैसे भी 9 आता है, वैसे भी) तो या तो इससे परेशान न हों या देखें कि क्या आप समान चीजों को करने के लिए वीएमएल प्राप्त कर सकते हैं। यदि आप ऐसा करने के लिए जावास्क्रिप्ट उपयोगिता को आजमाने और बनाने के लिए जा रहे हैं तो एक अच्छा प्रारंभिक बिंदु यह हो सकता है कि उपरोक्त कार्य को Raphaël में कैसे बनाया जाए।

Answer 2

इस प्रयास करें;)

<svg> 
    <defs> 
    <clipPath id="textClip"> 
     <text id="text1" x="20" y="300" style="font-family: Arial; font-weight: bold;font-size: 180pt; stroke: black; fill: none;">HEY</text> 
    </clipPath> 
    <g id="shapes"> 
     <image id="resultImg" preserveAspectRatio="xMidYMid meet" width="520px" height="520px" xlink:href="http://beerhold.it/500/500"/> 
    </g> 
    </defs> 
    <g > 
    <use xlink:href="#shapes" style="clip-path: url(#textClip);"/> 
    </g> 
</svg> 

यहाँ jsfiddle http://jsfiddle.net/nedudi/v84p5/1/