SVG透明背景网站

Question

我试图将此SVG代码的背景更改为透明而没有成功.我是SVG的新手,不知怎的,我无法在谷歌找到解决方案; 任何人都可以帮忙吗？

演示: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".

Answer 2

在矩形内，您可以使用 fill-opacity="0.5"

<rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" fill="green" fill-opacity="0.5" />