28106 sujets

CSS et mise en forme, CSS3

Bonjour.

Cela fait un moment que je rencontre des problème lorsque je souhaite apporté du style à mes images qui ont des sources en .svg

Par exemple j'ai cette image:

<img src="image.svg" class="svg" />


Maintenant dans mon fichier style.css j'aimerais faire ceci:

.svg
{
  fill: white;
}


Le problème est que le style ne s'applique pas.

En cherchant sur internet, j'ai mis la main sur un script jQuery qui permet de transformer mon svg en svg en ligne:

$().ready(function()
{
  $('img.svg').each(function()
  {
      var $img = $(this);
      var imgID = $img.attr('id');
      var imgClass = $img.attr('class');
      var imgURL = $img.attr('src');

      $.get(imgURL, function(data)
      {
        // Get the SVG tag, ignore the rest
        var $svg = $(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined')
        {
          $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined')
        {
          $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per  http://validator.w3.org
 
        $svg = $svg.removeAttr('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width'))
        {
          $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'));
        }

        // Replace image with new SVG
        $img.replaceWith($svg);
      }, 'xml');
  });
});


Une fois ce script ajouté, mon style css est bien appliqué à mon image mais le problème est que si j'ai d'autres images svg avec une classe différente de "svg", ca ne fonctionne plus...

Du coup j'aimerais savoir comment modifié le script pour qu'il fonctionne sur toutes mes images quelque soit leur classe voir même leur id ???

Merci d'avance !
Modifié par TooKi (21 Nov 2018 - 16:34)
salut,
je ne sais pas si c'est possible et j'ai des doutes mais pourquoi ne pas inclure directement ton SVG en PHP ?
C'est à dire ?

Tu veux dire placer directement la balise SVG dans mon fichier PHP ???

Si c'est le cas je ne souhaite pas procéder comme ça car les balises svg contiennent souvent beaucoup de lignes de code et ca alourdirai considérablement mon fichier PHP, c'est pour ca que je préfère passer par la balise img
Modérateur
Salut !

TooKi a écrit :
Tu veux dire placer directement la balise SVG dans mon fichier PHP ???

Oui, ou HTML si c'est une page HTML, mais de mettre directement le SVG en inline comme le fait ton script Js. L'avoir en inline c'est la seule façon d'interagir avec le SVG.

TooKi a écrit :
Si c'est le cas je ne souhaite pas procéder comme ça car les balises svg contiennent souvent beaucoup de lignes de code et ca alourdirai considérablement mon fichier PHP, c'est pour ca que je préfère passer par la balise img

Entre un svg inline et un appel de balise img + traitement avec jquery tu y gagnerais pourtant en perf et en simplicité je pense. Pour ne pas alourdir ton fichier php pourquoi ne pas faire un fichier php à part pour l'image contenant le code svg inline et l’importer avec un include/require ?
Merci pour vos réponses effectivement en faisant un include PHP c'est niquel je n'y avais jamais pensé Smiley lol