Discussion :

[soeursourire]

Bonjour,

J'ai un icone (une fichier svg) dont voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="27" height="50" viewBox="0 0 27 50">
  <defs>
    <style>
      .cls-1 {
        fill: #575757;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path d="M3.117,24.742 L27.004,48.452 L25.447,49.998 L1.559,26.289 L0.521,25.258 L0.002,24.742 L24.927,0.002 L26.485,1.548 L3.117,24.742 Z" class="cls-1"/>
</svg>

Je voudrais changer la couleur des lignes en blanc. Je sais que je peux changer directement la valeur de fill dans le fichier pour que ca marche mais j'aimerais le faire en jQuery.
J'avais donc penser avoir le code suivant:

en HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/icon/left_arrow.svg" class="svg-inject owl-carousel-nav-item"/>

en jQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
      $(document).ready(function() {
          $("svg-inject").find("style","cls-1").attr('fill', "white");
      }); 
    </script>

Mais la couleur ne change pas et je ne suis pas sûre de comment accéder à cette classe cls-1 ?

Merci pour votre aide.

[mathieu]

le contenu SVG peut-être modifié en y accédant avec "getSVGDocument" et en utilisant une balise "object"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
 
$(function () {
 
    $("input").click(function () {
 
        var contenuSVG = $("#imageSVG")[0].getSVGDocument();
 
        $(contenuSVG).find("path").css("fill", "lightblue");
 
    });
 
});
 
</script>
 
<object id="imageSVG" data="a.svg" type="image/svg+xml"></object>
 
<input type="button" value="mettre en bleu"/>

[soeursourire]

Merci pour votre aide!

J'aurais voulu que mon symbole SVG soit blanc dès le load de la page (pas de bouton pour cliquer). J'ai tenté ce code (en retirant le click de bouton) mais cela ne marche pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function() {
 
          var contenuSVG = $("#imageSVGLeft")[0].getSVGDocument();
 
          $(contenuSVG).find("path").css("fill", "white");
 
      });

Une idée? Merci.

[mathieu]

pour modifier le SVG au moment du passage à gauche ou droite, essayez de lancer le code comme ça par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    $(".owl-next").click(function() {
        $(".owl-carousel").owlCarousel.trigger('owl.next');
 
        var contenuSVG = $("#imageSVGLeft")[0].getSVGDocument();
        $(contenuSVG).find("path").css("fill", "lightblue");
 
    });

si cela ne fonctionne pas, affichez le contenu des différentes variables pour vérifier qu'elles contiennent bien ce dont vous avez besoin

[soeursourire]

Merci pour votre aide. Je suis perdue...

J'ai vu qu'en fait j'avais une erreur avec mon NEXT et PREV en inspectant la page web. J'ai donc changé et n'ai plus eu de problème avec ça par contre, j'ai un problème dès que je rajoute le changement de la couleur du contenuSVG...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function(){
 
  var owl = $('.owl-carousel');
 
  owl.owlCarousel({
  	items: 1,
  	nav: true,
  	navText: ["<object id='imageSVGLeft' data='images/icon/left_arrow.svg' style='fill:rgba(0,0,0,1);' type='image/svg+xml'></object>", "<object id='imageSVGRight' data='images/icon/right_arrow.svg' type='image/svg+xml'></object>"],
    autoplay: true
  });
 
  // Custom Navigation Events
    $(".owl-prev").click(function() {
        owl.trigger('owl.prev');
    });
 
   $(".owl-next").click(function() {
        owl.trigger('owl.next');
        var contenuSVG = $("#imageSVGLeft")[0].getSVGDocument();
        $(contenuSVG).find("path").css("fill", "lightblue");
   });
 
 
});

Voici l'erreur qui apparait à la ligne sur owl.trigger('owl.next');

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

[NoSmoking]

Bonjour,

Je sais que je peux changer directement la valeur de fill dans le fichier pour que ca marche mais j'aimerais le faire en jQuery.

j'ai vraiment du mal à comprendre ta démarche !?!
- Tu peux le modifier en direct dans le code
- Tu peux surcharger la class des path

mais si tu tiens absolument à jQuery, qu'il va te falloir visiblement apprendre, il existe encore aune autre solution qui consiste à mettre directement ton SVG dans ta page et à faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(function () {
    var contenuSVG = $("#imageSVG");  // ID du SVG bien sûr
    $(contenuSVG).find("path").css("fill", "lightblue");
  });

[soeursourire]

Oui je n'ai pas bien expliqué ce que je faisais.. je vais essayer d'être plus claire. J'utilise owlCarousel.
Pour cela j'ai dans mon code HTML ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class="owl-carousel">
            <div class="owl-carousel-item"> <img src="images/image_1.jpg"  alt="img1"/> </div>
            <div class="owl-carousel-item"> <img src="images/image_2.jpg" alt="img2"/> </div>
            <div class="owl-carousel-item"> <img src="images/image_3.jpg" alt="img3"/> </div>
          </div>

Mais mes images de flèches (left_arrow et right_arrow) sont alors déterminées dans le jQuery suivant (qui est appelé dans le fichier index):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
  	items: 1,
  	nav: true,
  	navText: ["<object id='imageSVGLeft' data='images/icon/left_arrow.svg' type='image/svg+xml'></object>", "<object id='imageSVGRight' data='images/icon/right_arrow.svg' type='image/svg+xml'></object>"],
  	autoplay: true
  });
 
  // Custom Navigation Events
    $(".owl-prev").click(function() {
        $(".owl-carousel").owlCarousel.trigger('owl.prev');
    });
 
    $(".owl-next").click(function() {
        $(".owl-carousel").owlCarousel.trigger('owl.next');
    });
});

Du coup j'ai tenté d'ajouter "stroke='white' ou fill='white' dans l'object dans le jQuery mais cela ne fonctionne pas non plus... et en rajoutant le dernier code jQuery que vous m'avez envoyé, cela ne fonctionne pas non plus... ou alors il faut vraiment que je rajoute des lignes de code avec ces objets dans le HTML pour que cela marche?

J'ai même un autre soucis, parce que les passages avec Next et Prev ne marchent qu'en cliquant autour de la flèche mais pas en cliquant sur la flèche, enfin ça c'est encore un autre soucis...
Je sais pas si c'est plus clair comme ça? Du coup je ne vois pas comment changer la couleur directement en css sans passer par jQuery?