I am trying to change the background of this SVG code to transparent without success. I'm new to SVG and somehow I can't find the solution on google; can anybody help?
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>
transparent is not part of the SVG specification, although many UAs such as Firefox do support it anyway. The SVG way would be to set the stroke
to none
, or alternatively set the stroke-opacity
to 0
.
You also don't set any value for fill on the <rect>
element and the default is black. For a transparent rect you want to add fill="none"
.