Différences

Ci-dessous, les différences entre deux révisions de la page.

--- devweb:svg [16-03-2016 10:41]
edmc73
+++ devweb:svg [29-12-2016 11:49] (Version actuelle)
edmc73
@@ Ligne 12: / Ligne 12: @@
 https://css-tricks.com/mega-list-svg-information/
+Le code suivant permet de remplacer les balises de type
+  <img src="monimage.svg">
+par une balises svg.
+L'avantage est de pouvoir garder un code html propre et de pouvoir appliquer du css pour changer la couleur du icon on mouse over par exemple.
+<code javascript>
+$(document).ready(function() {
+    $('img[src$=".svg"]').each(function() {
+        var $img = jQuery(this);
+        var imgURL = $img.attr('src');
+        var attributes = $img.prop("attributes");
+        $.get(imgURL, function(data) {
+            // Get the SVG tag, ignore the rest
+            var $svg = jQuery(data).find('svg');
+            // Remove any invalid XML tags
+            $svg = $svg.removeAttr('xmlns:a');
+            // Loop through IMG attributes and apply on SVG
+            $.each(attributes, function() {
+                $svg.attr(this.name, this.value);
+            });
+            // Replace IMG with SVG
+            $img.replaceWith($svg);
+        }, 'xml');
+    });
+});
+</code>
+si vous voulez utiliser le css color, assurez-vous d'avoir une propriété fill="currentcolor"
+sinon vous devez utiliser un
+<code css>
+#monimage path{
+  fill: #fff;
+}
+#monimage{
+  background-color:#000;
+}
+</code>
+===== Animation =====
+==== Morphing ====
+https://la-cascade.io/le-morphing-en-svg/
+toutes les propriétés SMIL pour les animations qui ne semble pas compatible IE11 => https://la-cascade.io/guide-des-animations-svg/
+Sinon une library existe compatible tout navigateur => http://thednp.github.io/kute.js/svg.html

Outils pour utilisateurs

Outils du site

Différences

Outils de la page