SVG transparent background web
WebSvgBackgroundWeb Problem Overview
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>
Web Solutions
Solution 1 - Web
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"
.
Solution 2 - Web
Inside rectangle you can use fill-opacity="0.5"
<rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" fill="green" fill-opacity="0.5" />
Solution 3 - Web
Let say you have a background with certain color, e.g. #231f20
and you really want to get rid of this. For example, name of your company/slogan is in white, i.e. #ffffff
.
You background should be in a similar format to this, simply remove the line from .svg
file:
<path id="path12" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 H 2048 V 350 H 0 Z" />
Leaving other paths untouched, which would draft the white color in this particular example. One of these could look like that one below:
<g transform="translate(87.6235,66.3594)" id="g22">
<path id="path24" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 h 16.497 c 36.293,0 59.458,19.135 67.356,64.009 8.71,49.49 -5.134,62.688 -46.707,62.688 H 22.299 Z m -87.624,-55.432 41.812,237.559 H 58.451 c 76.546,0 117.787,-35.633 104.023,-113.83 C 146.737,-21.117 90.875,-55.432 14.659,-55.432 Z" />
</g>