Я пытаюсь сменить фон этого SVG-кода на прозрачный без успеха. Я новичок в SVG и почему-то не могу найти решение на google; может кто-нибудь помочь?
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 не входит в спецификацию SVG, хотя многие UA, такие как Firefox, все равно поддерживают его. Путь SVG должен состоять в том, чтобы установить stroke в none или, альтернативно, установить stroke-opacity в 0.
Вы также не устанавливаете значения для заполнения в элементе <rect>, а по умолчанию - черный. Для прозрачного прямоугольника вы хотите добавить fill="none".
Внутри прямоугольника вы можете использовать fill-opacity = "0.5"
<rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" fill="green" fill-opacity="0.5" />