सर्कल के अंदर एसवीजी छवि

Question

मैं एक सर्कल बनाना चाहता हूं जिसमें एक छवि है, मैंने पहले से ही pattern या filter का उपयोग करने का प्रयास किया है, लेकिन उनमें से कोई भी मुझे अपेक्षित परिणाम नहीं देता है। नीचे दिए गए कोड है:

<svg id="graph" width="100%" height="400px"> 
 

 
    <!-- filter --> 
 
    <filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%"> 
 
     <feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/> 
 
    </filter> 
 
    <circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/> 
 
    
 
    <!-- pattern --> 
 
    <defs> 
 
    <pattern id="image" x="0" y="0" height="100%" width="100%"> 
 
     <image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image> 
 
    </pattern> 
 
    </defs> 
 
    <circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/> 
 
</svg>

मेरा लक्ष्य चक्र को बनाए रखने और इसके अंदर सीएसएस attr background-image की तरह कुछ पृष्ठभूमि छवि देने के लिए, के लिए है।

Answer 1

एक पैटर्न काम करेंगे स्थापित करने के लिए। आपको बस <image> एक आकार देना होगा। एचटीएमएल के विपरीत, एसवीजी छवियां चौड़ाई और शून्य की ऊंचाई तक डिफ़ॉल्ट होती हैं।

इसके अलावा, यदि आप छवि को मंडली के साथ स्केल करना चाहते हैं, तो आपको पैटर्न के लिए viewBox निर्दिष्ट करना चाहिए।

<svg id="graph" width="100%" height="400px"> 
 

 
    <!-- pattern --> 
 
    <defs> 
 
    <pattern id="image" x="0%" y="0%" height="100%" width="100%" 
 
      viewBox="0 0 512 512"> 
 
     <image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image> 
 
    </pattern> 
 
    </defs> 
 
    
 
    <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" /> 
 
</svg>

Answer 2

इस प्रयास करें,

उपयोग patternUnits="userSpaceOnUse" और <image> की height="100%" width="100%"

<defs> 
    <pattern id="image" x="0" patternUnits="userSpaceOnUse" y="0" height="100%" width="100%"> 
     <image x="0" y="0" width="500" height="500" xlink:href="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"></image> 
    </pattern> 
    </defs> 

Demo