Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
devweb:svg [11-01-2015 23:33] edmc73 |
devweb:svg [29-12-2016 11:49] (Version actuelle) edmc73 |
||
---|---|---|---|
Ligne 7: | Ligne 7: | ||
Faire des animations SVG en javascript avec framework => http:// | Faire des animations SVG en javascript avec framework => http:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | Le code suivant permet de remplacer les balises de type | ||
+ | <img src=" | ||
+ | par une balises svg. | ||
+ | |||
+ | L' | ||
+ | |||
+ | <code javascript> | ||
+ | $(document).ready(function() { | ||
+ | $(' | ||
+ | var $img = jQuery(this); | ||
+ | var imgURL = $img.attr(' | ||
+ | var attributes = $img.prop(" | ||
+ | |||
+ | $.get(imgURL, | ||
+ | // Get the SVG tag, ignore the rest | ||
+ | var $svg = jQuery(data).find(' | ||
+ | |||
+ | // Remove any invalid XML tags | ||
+ | $svg = $svg.removeAttr(' | ||
+ | |||
+ | // Loop through IMG attributes and apply on SVG | ||
+ | $.each(attributes, | ||
+ | $svg.attr(this.name, | ||
+ | }); | ||
+ | |||
+ | // Replace IMG with SVG | ||
+ | $img.replaceWith($svg); | ||
+ | }, ' | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | si vous voulez utiliser le css color, assurez-vous d' | ||
+ | |||
+ | sinon vous devez utiliser un | ||
+ | <code css> | ||
+ | #monimage path{ | ||
+ | fill: #fff; | ||
+ | } | ||
+ | #monimage{ | ||
+ | background-color:# | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Animation ===== | ||
+ | |||
+ | ==== Morphing ==== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | toutes les propriétés SMIL pour les animations qui ne semble pas compatible IE11 => https:// | ||
+ | |||
+ | Sinon une library existe compatible tout navigateur => http:// | ||
+ |