Menu
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>
734
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" .
A SVG always have a transparent background as long as you do not insert a rect or something that is filling the whole graphic or using CSS to set a background color for the root element.
In a mask, each pixel value can range from fully transparent to fully opaque. SVG supports only simple alpha blending compositing (see Simple Alpha Compositing).
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".
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
