Problème SVG

topali2 Messages postés 33 Statut Membre -  
topali2 Messages postés 33 Statut Membre -
Bonjour cher communauté,

Je suis ent rain d'élaborer un projet avec du svg et je rencontre une petite difficulté..n'étant que débutant dans la programmation, j'espère que vous pourrez m'aider :)

J'aimerais savoir s'il est possible de faire en sorte que le cycle de la lune et du soleil soient infini? car ils ne se repetent qu'une seule fois.. j'ai beau essayé avec la balise <repeatCount> ca marche pas!

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <rect x="1" y="1" rx="5" ry="5" width="1000" height="500" fill="white" stroke="black">
        <animate attributeName="fill" attributeType="CSS" values="#5CCDF7;#262829;#5CCDF7" keyTimes="0;0.7;1"  begin="0s" dur="20s" repeatCount="indefinite"/>
    </rect>

    <defs>

        // le soleil
        <radialGradient id="jauneorangerouge" r="50%" cx="50%" cy="50%" fy="50%" fx="50%">
            <stop offset="0%" style="stop-color:yellow;stop-opacity:1"/>
            <stop offset="60%" style="stop-color:orange;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:red;stop-opacity:1"/>

        </radialGradient>
        // La lune
        <radialGradient id="blancgris" r="50%" cx="50%" cy="50%" fy="50%" fx="50%">
            <stop offset="0%" style="stop-color:#FBFBFB;stop-opacity:1"/>
            <stop offset="60%" style="stop-color:#E3E6E5;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:#898C8C;stop-opacity:1"/>
        </radialGradient>

        <path id="bellePetiteCourbe" d="M0,0 q600,-400 1101,0"/>

    </defs>

        <circle cx="-50" cy="400" r="50" style=" fill:url(#jauneorangerouge); ">
        <animateMotion  id="soleil" begin="0s" dur="5s">
        <mpath xlink:href="#bellePetiteCourbe"/>
        </animateMotion>

    </circle>
        <circle cx="-50" cy="400" r="50" style=" fill:url(#blancgris); ">
        <animateMotion  id="lune" begin="soleil.end" dur="5s">
            <mpath xlink:href="#bellePetiteCourbe"/>
        </animateMotion>
    </circle>
    
</svg>


merci d'avance :)

2 réponses

topali2 Messages postés 33 Statut Membre
 
j'ai oublié de preciser que leu cycle se font a tour de rôle..lorsque la lune est passée, le soleil apparait etc...
0
topali2 Messages postés 33 Statut Membre
 
svp quelqun pour m'aider :( je peux plus avancer et le delai approche
0