Forums Développement Multimédia

Aller au contenu

connaitre position et angle objet svg

svg animatemotion dom CODE HTML CSS

26 réponses à ce sujet

#1 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 21 October 2013 - 08:16 AM

voila je réalise le déplacement d'un rect le long d'un path avec une animatemotion
mais j aimerais connaitre avec un petit scrip java la position de mon rect ainsi que son angle.

<svg id="perenoel" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="200" y="0" style=" alignment-adjust:auto;width:1002px;height:300px;position: relative;">
<defs>
<pattern id="monMotif" x="0" y="0" width="100%" height="100%" patternUnits="objectBoundingBox" >
<image id="traineau" xlink:href="traineau.svg" x="0" y="0"  width="231" height="88" transform="rotate(180),translate(-231,-88)"/></pattern>
</defs>
 
//courbe du path sinusoide approxime par bezier//
<path id="chemintraineau"
d="M 1100,80 Q 800,240 470,120 T -100,110"   />
<g  id="1" >
///mon rectangle///
<rect id="traineauperenoel"  width="231" height="88" fill="url(#monMotif)"
transform="translate(-115,-44)"/>
///l animate motion///
<animateMotion  id="prem" begin="0s" dur="5s"  rotate="auto" repeatDur="indefinite">
<mpath xlink:href="#chemintraineau"/>
</animateMotion>
</g>
</svg>
 

j ai essaye plusieurs trucs genre
alert(document.getElementById("traineauperenoel").transform.animVal.getItem(0).angle)
mais ca ne donne rien

si un spécialiste svg pouvait m aider et me dire si c est possible ou pas je le remercie par avance.

j ai déjà visite plein de site pour essayer d'avoir solution
http://websitecreati...7/28233239.html

#2 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 24 October 2013 - 08:06 AM

j ai trouvé ca
http://stackoverflow...ere-via-js?rq=1

#3 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 24 October 2013 - 20:25 PM

je rencontre un problème avec firefox(ne rencontre pas ce problème avec chrome)
au début je croyais que ca venait de mon anim mais non
j ai une bannière.svg je fais ouvrir avec firefox aucun problème je peux la redimensionner et occupation uc =0%.
si j intégre cette bannière.svg dans un div header ou svg via background-image:url(banniere.svg) dans le css boum j ai une occupation uc qui monte a 13%!!!!!! :mad:
pareil si je fais <image id="traineau" xlink:href="banniere.svg" x="0" y="0" width="1000" height="255"/>
comprend pas :sad:

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 24 October 2013 - 20:57 PM

Pfff ... je découvre le svg avec RaphaelJS depuis le début de semaine, mais ne me suis pas encore frotté aux animations pour l'instant.

Tu nous feras un retour si tu arrives à tes fins ?

Juste pour savoir, ça n'était pas jouable avec le tag Canvas et une librairie comme EaselJS ?
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 25 October 2013 - 07:29 AM

oui je ferais un récapitulatif problèmes rencontrés.
c'est faisable avec canvas mais je suis partie sur svg car je souhaite redimensionnable sans perte qualité comme avec flash.

#6 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 28 October 2013 - 12:14 PM

Tu as vu cette nouvelle librairie (créée par l'auteur de RaphaelJS) ?

http://snapsvg.io/

Tu pourrais y trouver ton bonheur.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#7 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 29 October 2013 - 08:46 AM

merci je vais regarder ca

#8 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 05 November 2013 - 18:25 PM

bon
le meilleur tuto que j ai trouve c est ça
http://samples.msdn....6_arenaOOP.html
desqu on dépasse 30 billes ça plante firefox donc
1/en svg l image de fond et le déplacement du traineau.svg le long du path ( ca ca fonctionne très bien et redimensionnement sans perte qualité )
2/pour les etincelles je vais utiliser canvas et des tableaux

#9 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 15 November 2013 - 14:23 PM

j en ai marre :evil:
quand ca marche dans firefox c amarche pas dans chrome
quand ca marche dans chrome ca marche pas dans ie 11
quand ca marche dans ie11 ca marche pas dans firefox

#10 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 16 November 2013 - 10:11 AM

un probleme rencontre du a fire fox ( avec chrome et ie11 ca marche correctement)
si vous faite

<svg id="perenoel"  xml:lang="fr"  preserveAspectRatio="xMidYMid meet" viewbox="0 0 1000 300">
<image   xlink:href="kiwi.svg"  x="500" y="20" height="150" width="100" ></image>
</svg>
 
avec votre image kiwi.svg avec width=100% height="100%" et viewbox(0 0 200 300) ( largeur et hauteur du kiwi)
dans chrome et ie 11 votre kiwi prendra automatique largeur=100 et height=150 et avec crt+molette deviendra plus gros et plus petit
avec firefox non
le kiwi ne changera pas de taille et quand on fait crtl+roulette ben sera pas affiche en entier :mad:

#11 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 18 November 2013 - 09:46 AM

une autre erreur rencontrée et résolue
je place dynamiquement mes svg avec javascript
un élément svg a des propriétés propre aux éléments svg et des propriétés qu on peut placer dans le css.
pour les propriétés css on peut utiliser la syntaxe:

svg1.style.height="100%";svg1.style.width="100%";
svg1.style.position ='relative';
svg1.style.background="";
svg1.style.margin="auto auto auto auto";
 
mais pour les propriétés propre aux svg il faut utiliser la syntaxe svg sinon problème affichage avec certain navigateur.

var svg1 = document.createElementNS("http://www.w3.org/2000/svg",'svg');//ici je faisais erreur en mettant createElement(svg)
svg1.setAttributeNS(null,'xmls',"http://www.w3.org/2000/svg");
svg1.setAttributeNS(null,'id','perenoel');
svg1.setAttributeNS(null,"height","300");
svg1.setAttributeNS(null,"width","1000");
svg1.setAttributeNS(null,"style", "stroke:limegreen;stroke-width:2;opacity:1;fill:none");
 

sinon je viens de tester intégration d'une fonte dans un svg ca ne marche qu avec chrome
http://caniuse.com/svg-fonts
bref je regrette flash ou tout tenait dans un seul fichier la va falloir telecharger les images les fonts
bon problème résolu pour fonte je ne met plus de fonte je tape texte dans illustrator et le sauve au format svg pour le mettre dans mon anim

#12 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 23 November 2013 - 14:02 PM

bon la je suis assez contant Image IPB
avec mon éditeur html je place toute mes images svg sous forme de code plus le canvas
je copie tout ce code et le transforme en variable json via un convertisseur online
et dans mon javascript je parse cette grosse variable json et la met dynamiquement entre deux balises avec un innerhtml
et presque miracle ca marche bref tout tiens dans un javascript plus besoin de background url
presque miracle car sur chrome nickel mais dégradation que je zoom
et sur firefox et ie nickel quand je zoom mais légère dégradation initiale
je vais reprendre mes images une à une j espere que je trouverais ou est le problem Image IPB
:mrgreen: problème résolu ca provenait éléments communs dans le code svg a deux images
j ai remplace SVGID par SVGIDa à l aide rechercher remplacer et plus de probleme

#13 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 23 November 2013 - 15:31 PM

Excellent !

Il me tarde de voir le résultat
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#14 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 23 November 2013 - 17:51 PM

merci je dois en etre a 80% reste le changement de couleur et gradient couleur du texte a faire

un truc intéressant quand on fait une image vectorielle bien mettre un nom explicite aux calques qui contiennent une figure car on retrouve ce nom dans le code svg et on y a accès via le javascript. ca permet de modifier couleur d'un objet par exemple
bon l uc mouline a 13% maintenant avec le gradient et mon texte qui clignote c est trop je devais rester à 6% max
avec canvas pas se problème par contre il faut inclure la fonte.

#15 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 26 November 2013 - 17:37 PM

on ne peut pas faire un innerHTML dans une balise svg avec chrome et ie ( firefox ok)

euh si finalement grace a ca
http://innersvg.goog.../hg/innersvg.js

j arrive a faire galoper mes petites bébêtes ouf j ai cru que j abandonnais

#16 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 30 November 2013 - 21:37 PM

je galère avec déplacement traineau et j ai trouve ça
http://www.html5rock...nce-animations/
ca devrait convenir

#17 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 02 December 2013 - 11:16 AM

voila fini Image IPB
bon il y a un problème avec ie il n apprécie pas appel au canvas je sais pas pourquoi? il dessine cerf en blanc mais la je vois pourquoi.
je vais essayer une autre méthode pour le gradient sur le texte car utilise trop d'uc.
il me reste à trouver l erreur pour ie ( chaque element fonctionnant correctement c est quand je groupe tout que l erreur apparait) et mettre des déplacements relatifs pour insérer a la taille que je veux)
avec firefox je peux utiliser un canvas comme fond d'un mask en gros je peux faire
<svg id="mon svg" >
<mask id=monmask">
code du svg
</mask>
</svg>
<canvas id="moncanvas" style=mask:url(#monmask)>
</canvas>
mais pas avec chrome ni ie :sad:

#18 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 05 December 2013 - 19:37 PM

ai localise l erreur ie ca provenait de ma variable json représentant la bannière me reste plus qu a essayer de la corriger
ca provient de mon image .ai que je converti en svg j ai résolue le problème en coupant cette image en deux images
et comme chaque partie de l' image fonctionne ca m évite de chercher précisément ou est le problème( un nom de calque un gradient???)
en faite non fonctionne toujours pas il y a dix objets sur le calque va falloir tester un par un
sinon ai termine mais quand je met dans post sur canalblog ca me décale tout alors que sur page:voila fini aucun décalage help please?(par contre avec un iframe ca marche)
pour l integration c est assez simple il suffit de mettre
<p>
<script type="text/javascript" src="http://ahp.li/5c25d0f306106e10c267.js"></script>
</p>
<div id="headernoel" style="position: relative; width: auchoixpx; height: auchoixpx; margin: auto;"></div>

#19 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 09 December 2013 - 19:53 PM

ai resolu en partie le décalage il il faut rajouter line-height:0%</p>
<div id="headernoel" style="position: relative; width: 100%; height: 305px; margin: 0px auto auto; padding: 0px; border: opx; line-height: 0px; clear: both; display: block;"></div>

mais il reste toujours 1 ou 2 px décalage help un specialiste des div

#20 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 09 December 2013 - 20:30 PM

Alors là chapeau, en SVG, c'est une belle performance

Pour le décalage, utilise un overflow:hidden à la DIV parent plutôt

regarde le réglage CSS sur les 2 images jointes

par contre j'ai pas testé en dehors de Chrome ...

Fichier joint  noel_css_1.png   238.31 Ko   8 téléchargement(s)
Fichier joint  noel_css_2.png   228.26 Ko   7 téléchargement(s)
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#21 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 13 December 2013 - 15:25 PM

bon j ai trouvé d’où provenait le petit décalage
pour le canvas et le svg premier plan j utilisais margin-top et chaque fois ça mettait un petit décalage de 1 ou 2 px je ne sais pas pourquoi
maintenant j utilise top et hop plus de décalage( margin top uniquement pour les div)

#22 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 15 December 2013 - 16:10 PM

bon je l ai fait entièrement en html5 canvas normalement je devrais pouvoir faire une apps( quelques imperfection du a une non maitrise d'illustrator dans les retouches de l'image )
http://ahp.li/bcc4ef...ffb7f01bf1.html
je suis assez content j ai reussi à faire la transition flash htlm5 et ca fonctionne sous firefox ie et chrome Image IPB( sur ie mobile aussi mais ca se traine Image IPB )

(on peut mettre image svg dans canvas simplement pour firefox on ne peut pas mettre width/height en % dans le svg )

sinon petit problème rencontrer avec canvas et gradient couleur
je créai un gradient de couleur mongrad=contextet.createLinearGradient(......
ensuite j avais deux fonctions
la traditionnel draw et une fonction changecouleurgradient avec dedans
mongrad.addColorStop(i,colorStops[parseInt(Math.random()*100)])
au bout de 3 seconde ca ce mettait a ralentir énormément
pour résoudre le problème j ai du integrer dans ma fonction changecouleur gradient
mongrad=contextet.createLinearGradient(...............................)
mongrad.addColorStop(i,colorStops[parseInt(Math.random()*100)])

a chaque appel de changecouleurgradient je recréais le gradient et la ca marche

#23 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 24 December 2013 - 17:14 PM

j ai essaye de faire fullscreen mais ca donne n importe quoi snifff

sur canalblog il nettoit tout le code on peut meme pas mettre canvas et iframe avec allowfullscreen Image IPB

ca y est j ai compris pourquoi j ai un résultat tout bizarre en fullscreen
j ai juste une fonction onresize pour le canvas donc tous le reste pas modifier d'ou résultat bizarre
en faite il faudrait que je relance le script a zéro quand je passe en mode fullscreen( je sais pas si faisable ca )

ca y est mon mode plein écran fonctionne à part léger bug sous firefox quand je quitte mode plein écran remet pas un élément en place faut que je zoom pour remettre dans l ordre ( ie et chrome marche nickel)
euh c était une petite erreur de ma part maintenant ca a l air de fonctionner en local et integré dans les trois navigateurs

#24 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 02 January 2014 - 17:39 PM

en conclusion:
j ai laissé tomber langage svg smil présente peu d’intérêt
pour ce qui est des filtres svg( feBlend dans image svg) malheureusement encore problème avec navigateur donc pas utilisé
au début j'etais partie pour tout incorporer en un seul fichier js c est faisable mais problème avec image svg complexe donc je laisse tomber
et comme on peut mettre image svg dans canvas au final je me retrouve avec truc classique javascript canvas mais il faut reconnaitre que flash c était plus simple quand même ;-)

#25 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 03 January 2014 - 11:50 AM

Même si le SVG présente de nombreux avantages, sans un soutien important des acteurs principaux, il est voué à rester dans l'ombre, de la même manière que Flash qui a subit la désaffection d'Apple puis Google (via Android)

Actuellement, le principal (unique ?) sponsor du SVG reste Adobe, je pense qu'il vaut mieux rester sur Canvas à l'heure actuelle et reserver SVG pour des expérimentations

Merci beaucoup pour tes retours

PS : il n'y a pas une semaine où je ne me dis pas que flash/as3 c'est tout de même bien plus puissant et simple
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#26 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 14 January 2014 - 16:22 PM

la je viens de faire une autre anim et j ai galeré avec mode full screen
firefoxe:gère tres bien le full screen en mettant en plein écran le div souhaite et requestfullscreen appellable a partir d'une fonction pas besoin evt click mais le problème si on appel a partir evt click il n affiche pas image background autre div que celui oui il y a l événement click

var inmonFullScreen = false; // flag to show when full screen
var monfullscreen =document.getElementById("headernoel");
monfullscreen.addEventListener("click", function (evt) {//obligatoire pour ie car refuse passer en fs alors que aucun problem sur chrome et ff
if (inmonFullScreen == false && boutfs) {
makeFullScreen(headernoel); // [b]pour ff et chrome mettre headernoel car sinon affiche pas background image de noel[/b]
//makeFullScreen(evt.target);
} else {
resetfullscreen();
}
}, false);
 
pour chrome c est comme ff mais le fullscreen pas traite de la même manière il faut donc redimensionner le div fullscreen au dimension de l écran via fonction onresize

pour ie le gros problème c est que le fullscreen doit etre appeler a partir événement click sinon il ne se passe rien du tout et traite le fullscreen comme chrome sauf pour position souris

bref au final c est assez complexe si on veut que sa fonctionne partout Image IPB
(y a meme peut etre un plantage ie mais ca provient peut script detection ie)

#27 pierreflash

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 117 messages

Posté 25 January 2014 - 18:23 PM

bon je viens de realiser un script tombe la neige malheureusement il ne fonctionne bien que sur ie
sur ff il y a une saccade et sur chrome l uc grimpe et en plus ca plante le deboggeur Image IPB

existe il outils gratuit qui permettent de debbuger facilement un script ?car la j ai vraiment du mal a trouver le problème pour chrome et ff

bon erreur localise je vous l expliquerai



2 utilisateur(s) li(sen)t ce sujet

0 membre(s), 2 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP