एसवीजी पारदर्शी पृष्ठभूमि वेब

Question

मैं इस एसवीजी कोड की पृष्ठभूमि को सफलता के बिना पारदर्शी में बदलने की कोशिश कर रहा हूं। मैं एसवीजी के लिए नया हूं और किसी भी तरह से मुझे Google पर समाधान नहीं मिल रहा है; क्या कोई मदद कर सकता है?

डेमो: http://jsfiddle.net/kougiland/SzfSJ/1/

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100"> 
    <rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" /> 
    <circle cx="0" cy="50" r="15" fill="blue" stroke="transparent" stroke-width="1"> 
     <animateMotion 
     path="M 0 0 H 300 Z" 
     dur="3s" 
     repeatCount="indefinite" 
     /> 
    </circle> 

    <circle id="rotatingBall" cx="0" cy="50" r="15" fill="green" stroke="transparent" stroke-width="1" opacity="0.8"></circle> 
    <animateTransform 
     xlink:href="#rotatingBall" 
     attributeName="transform" 
     begin="0s" 
     dur="2s" 
     type="rotate" 
     from="0 20 20" 
     to="360 100 60" 
     repeatCount="indefinite" 
     /> 
</svg> 

Answer 1

पारदर्शी, एसवीजी विशिष्टता का भाग नहीं है, हालांकि जैसे कि Firefox कई यूएएस वैसे भी इसका समर्थन करते हैं। एसवीजी तरीका stroke को none पर सेट करना होगा, या वैकल्पिक रूप से stroke-opacity0 पर सेट करना होगा।

आप <rect> तत्व को भरने के लिए कोई भी मूल्य निर्धारित नहीं करते हैं और डिफ़ॉल्ट काला है। एक पारदर्शी आय के लिए आप fill="none" जोड़ना चाहते हैं।