55

この SVG コードの背景を透明に変更しようとしていますが、成功していません。私はSVGが初めてで、どういうわけかGoogleで解決策を見つけることができません。誰でも助けることができますか？

デモ: 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>

4

3 に答える 3

71

transparent は SVG 仕様の一部ではありませんが、Firefox などの多くの UA はとにかくそれをサポートしています。SVG の方法は、 を に設定するstrokeかnone、代わりに を に設定するstroke-opacityこと0です。

また、要素の塗りつぶしに値を設定せず<rect>、デフォルトは黒です。追加したい透明な四角形の場合fill="none"。

于 2013-09-02T20:34:11.240 に答える