Forum : SVG : image, clip-path et rotate ......

Hello !
Est ce que tu aurais le html qu'on puisse voir à quoi il ressemble stp ?

Auteur

remplace le nom du dessin par un nom que tu as sur ton PC (même folder)
on voit que le cercle (clippé) tourne sur "un" axe, mais pas sur "son" propre axe (milieu). c'est mon probleme
c'est vraissemblablement à voir avec le CSS, mais quoi ?? !!!

xx {

    animation: anim 10s infinite linear;
    transform-origin:50% 50%;
    transform-box:fill-box;

}
@keyframes anim {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<image id="tata" x="0" href="PlanPub_BPM.png" y="0" width="4120" height="1720" />
<clipPath id="toto">
<circle id="titi" cx="2400" cy="1180" r="100" stroke="black" fill="red" font-size="60" stroke-width="60"/>
</clipPath>
<xcircle id="titi" cx="2400" cy="1180" r="100" stroke="black" fill="red" font-size="60" stroke-width="60"/>
<use id="xx" clip-path="url(#toto)" href="#tata" fill="red" stroke="black" font-size="60" stroke-width="60" />
</svg >

dfb

Auteur

ps:
l'éditeur du forum m'a supprimé le dièze devant le xx { dans le style

Arzou

Yep merci !
En fait, il faut mettre un attribut clipPathUnits="objectBoundingBox" à ton clipath #toto dans le html.
Et dans le css, dans ton #xx, tu dois rajouter clip-path: circle(10%); (10% c'est un exemple)

ça devrait normalement marcher :)

dfb

Auteur

ça fait bien tourner sur son axe, mais uniquement sur le milieu de l'image, pas à l'endroit du clip. c'est un cauchemard ! ;)

Arzou

Ah, alors en fait je ne comprends pas bien ce que tu cherches à faire :D

dfb

Auteur

imagine simplement l'image d'une voiture de profile. Je veux donner l'illusion que la roue tourne sur elle même. Le centre de rotation est le milieu de la roue. Avec ton code le centre de rotation est le milieur de l'image ! (donc le milieu de la voiture !). Il faut un parametre (lequel ?) pour indiquer que le centre de rotation n'est pas le milieu de l'image, mais les coordonnées X,Y du centre de la roue. Quand je change les coordonnées du clip (X & Y) alrs le cercle "clipe" bien ma roue, maus je vois la roue tourner autor de l'image (PAS sur elle-même)

Arzou

Attendons de voir si quelqu'un pourra t'aider .. dsl

dfb

Auteur

personne ne connaitrait un forum de spécialistes en SVG svp ?

SVG : image, clip-path et rotate ......

9 réponses