एक पृष्ठभूमि छवि के साथ एसवीजी पथ तत्व भरें

Question

क्या background-imageएसवीजी <path>तत्व के लिए सेट करना संभव है ?

उदाहरण के लिए, यदि मैं तत्व सेट करता हूं, तो class="wall"CSS शैली .wall {fill: red;}काम करती है, लेकिन .wall{background-image: url(wall.jpg)}न तो, न ही .wall {background-color: red;}।

Comments

एसवीजी पाठ के लिए पृष्ठभूमि छवि को सेट करने का तरीका

— दिखाते हुए

गहरी जानकारी में कुछ और तलाश करने वालों के लिए इस लेख की लिंक की

— पाउलो ब्यूनो

Answer 1

आप इसे एक पैटर्न में पृष्ठभूमि बनाकर कर सकते हैं :

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

अपनी छवि के अनुसार चौड़ाई और ऊंचाई समायोजित करें, फिर इसे इस तरह से पथ से संदर्भित करें:

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

काम करने का उदाहरण

Comments

बहुत अच्छा, यह base64 छवियों के साथ भी काम करता है? इसके बजाय wall.jpg जैसा कुछ data:image/png;base64,iVBORw0KGgoAAआप सामान्य सीएसएस में होगा?

— क्रिस्टोफ़

@Christoph मैं नहीं जानता, यह कोशिश करो और देखो।

— रॉबर्ट

@robertc मैंने कोशिश की और यह काम नहीं किया, लेकिन मेरे पास एक डुप्लिकेट शैली तत्व था। इसे खत्म करके, यह ठीक काम किया;)

— क्रिस्टोफ

@robertc: मेरे पास आपके उत्तर के बारे में एक प्रश्न है। पैटर्न वैश्विक निर्देशांक (0,0) से शुरू होता है। क्या यह संभव है कि पैटर्न को ऑब्जेक्ट से जुड़ी स्थानीय समन्वय प्रणाली का उपयोग करने दिया जाए? मैं अपने svg में अलग-अलग जगहों पर एक परिभाषा बनाना चाहता हूं और ऐसा क्या होता है, कि पैटर्न को पृष्ठभूमि में दोहराया जाता है और वस्तुओं को मास्क के रूप में उपयोग किया जाता है।

— तोबियस गोलब्स

@robertc xlink:hrefएसवीजी 2 के बाद से पदावनत करने के लिए और बस hrefअब उपयोग करने के लिए कृपया अपने उत्तर को अपडेट करें । developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— ब्लेक रेगलिया