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

Par dfb, il y a 4 ans


Les bases HTML/CSS

Bonjour à tous,
J'essaye desepérement de faire tourner (rotate) sur elle-même une parti (clip) d'une image embarquee (<image ...>) dans mon SVG. Quelqu'un aurait-il une bonne expérience en SVG pour m'aider ?
Cela doit (devrait) marcher avec du CSS ..... mais comment ..... ??
merci
Cdt

9 réponses

Arzou, il y a 4 ans

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

dfb, il y a 4 ans

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 ?? !!!

<svg xmlns="http://www.w3.org/2000/svg" width="5000" height="5000" preserveAspectRatio="xMinYMin slice" viewBox="0 0 5000 5000" >
<style >

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, il y a 4 ans

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

Arzou, il y a 4 ans

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, il y a 4 ans

ç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, il y a 4 ans

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

dfb, il y a 4 ans

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, il y a 4 ans

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

dfb, il y a 4 ans

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