Web nền trong suốt SVG

Question

Tôi đang cố gắng thay đổi nền của mã SVG này thành minh bạch mà không thành công. Tôi mới vào SVG và bằng cách nào đó tôi không thể tìm thấy giải pháp trên google; ai cũng có thể giúp được?

demo: 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

minh bạch không phải là một phần của đặc tả SVG, mặc dù nhiều UAS như Firefox làm hỗ trợ nó anyway. Cách SVG sẽ là đặt stroke thành none hoặc cách khác là đặt stroke-opacity thành 0.

Bạn cũng không đặt bất kỳ giá trị nào để điền vào thành phần <rect> và mặc định là màu đen. Để có hiệu ứng trong suốt bạn muốn thêm fill="none".