Search code examples
svgbackground

SVG transparent background web

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>

Solution

  • 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".