SVG прозрачный фон web

Question

Я пытаюсь изменить фон этого SVG-кода на прозрачный без успеха. Я новичок в SVG и почему-то не могу найти решение на 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

прозрачна не является частью спецификации SVG, хотя многие UAs, такие как Firefox поддерживают его в любом случае. Путь SVG состоял бы в том, чтобы установить stroke в none или, альтернативно, установить stroke-opacity на 0.

Вы также не устанавливаете значения для заполнения на элементе <rect>, а по умолчанию черный. Для прозрачного прямоугольника вы хотите добавить fill="none".