Estoy tratando de cambiar el fondo de este SVG código transparente sin éxito. Soy nuevo en el SVG y de alguna manera no puedo encontrar la solución en google; ¿alguien puede ayudar?

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>
InformationsquelleAutor Gildas.Tambo | 2013-09-02

2 Comentarios

  1. 39

    transparente no es parte de la especificación SVG, aunque muchos de los UAs como Firefox apoyo de todos modos. El SVG manera sería establecer la stroke a none, o, alternativamente, establecer el stroke-opacity a 0.

    Usted también no establece ningún valor para rellenar en el <rect> elemento y el valor predeterminado es el negro. Para una transparente rect desea agregar fill="none".

  2. 0

    Interior del rectángulo se puede utilizar fill-opacity=»0.5″

    <rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" fill="green" fill-opacity="0.5" />
    • Funciona sólo para la transparencia. Para tener un completo fondo transparente debe utilizar el @Robert Longson de la solución.

Dejar respuesta

Please enter your comment!
Please enter your name here