web-dev-qa-db-fra.com

Styliser des fichiers SVG externes avec jQuery et CSS

J'ai activé la liaison de fichiers SVG sur mon site WP à l'aide du Safe SVG plug-in , et j'en suis plutôt satisfait. Cependant, j'ai un problème avec le style des chemins SVG contenus dans le fichier externe que j'appelle/linikng. Actuellement, je ne peux pas créer l'interactivité que je désire parce que je ne peux pas:

  1. utiliser mon javascript/jQuery personnalisé pour ajouter des classes aux différents chemins SVG (cela fonctionne avec tous mes SVG en ligne, mais pas avec les liens externes);
  2. changer les remplissages/l'opacité des chemins SVG dans mon fichier style.css, en utilisant les classes appliquées jQuery.

Lorsque j'utilise SVG en ligne, je peux tout contrôler comme je le veux, mon travail jQuery et CSS fonctionne. Mais lorsque j'utilise le fichier externe à l'aide du plug-in Safe SVG, mon CSS ne semble pas interagir avec les éléments path, ni les modifier.

J'ai trouvé des informations qui traitent de ce problème, en général et au-delà de WordPress, à propos des CSS et des SVG externes (par exemple this ), mais je me demandais si quelqu'un ici aurait une solution simple et efficace basée sur WordPress qui autoriserait 1) mes scripts jQuery à accéder aux classes de chemin et à les modifier et 2) mon CSS à modifier les éléments de chemin.

Je me rends compte que je ne fais que suivre la route en ligne et me épargner les tracas, mais j'ai des raisons de vouloir voir si je ne peux pas accomplir cela avec des fichiers SVG indépendants.

Merci!

jquerycsssvg
1
CoderScissorhands

J'ai trouvé deux solutions imparfaites mais fonctionnelles, chacune avec ses propres limites.

Veuillez noter que, avant de pouvoir utiliser l'une des solutions, vous devez d'abord activer le téléchargement SVG sur votre page (car WP ne le permet pas par défaut). Vous pouvez le faire en utilisant un plugin comme Safe SVG .

La solution que j'ai finalement choisie ne nécessite en aucun cas jQuery. Cela implique l'utilisation d'un plug-in WP bien connu appelé " Champs personnalisés avancés " (ou ACF) et l'ajout de php à vos modèles. La deuxième solution est celle que j'ai trouvée dans l'un des fils de discussion SVG postés par socki03 dans une question différente (que j'avais moi-même posée); il utilise une bibliothèque jQuery appelée SVGinjector .

Solution n ° 1: Champs personnalisés avancés (ACF)

Cette solution est celle que j'ai choisi de mettre en œuvre et j'ai trouvé dans ce fil de discussion . Ce n'est pas idéal car vous devez ajouter explicitement du code à vos modèles (au lieu de pouvoir tout ajouter dans le tableau de bord WP). Donc, si vous choisissez cette voie, vous devriez en savoir un peu plus sur la modification de fichiers de modèles.

Que fait la solution ACF?

Une fois que vous avez correctement configuré le plug-in ACF et inséré le code dans votre modèle, vous entrerez dans votre tableau de bord, ce qui vous permettra de sélectionner un fichier SVG. C’est formidable, car SVG fait vraiment partie de la page, qui peut être modifiée avec CSS, et se charge très tôt avec tous les autres éléments.

Comment le mettre en oeuvre

  1. Installez le plugin ACF .

  2. En utilisant le plugin ACF, suivez les étapes pour créer un champ d’image qui a renvoyé l’URL de l’image.

    2.1. aller au tableau de bord

    2.2. sélectionnez la section des champs personnalisés (cela fait partie du plugin ACF)

    2.3. en haut de la page, il est écrit "Groupes de champs", sélectionnez le bouton "ajouter" à côté.

    2.4. Créer le champ

    • 2.4.1. désignez le "nom du champ" et sélectionnez les options appropriées. Vous devez vous assurer de sélectionner "image" pour l'option "type de champ".

    • 2.4.2. Après avoir sélectionné "image" dans les options "type de champ", une nouvelle option, "URL de retour", apparaîtra. C'est cette option qui va générer le code qui va récupérer vos images. Choisissez "URL de retour"

3.Ouvrez le fichier php pour le modèle auquel vous voulez ajouter le svg.

  1. Dans votre fichier php, insérez ce code où vous voulez que le SVG apparaisse: <?php echo file_get_contents( get_field( 'the_svg_field_name_you_designated' ) ); ?> et sauvegardez votre fichier.

  2. Retournez au tableau de bord WP, allez à "pages", puis allez à l'écran "édition" de la page dans laquelle vous voulez que le SVG apparaisse. Vous devriez maintenant avoir un champ avec le "nom de champ" entré qui vous permettra de sélectionner une image.

  3. Cliquez sur le bouton près du nom du champ, il devrait alors vous inviter à naviguer dans vos fichiers. Naviguez jusqu'au fichier SVG que vous souhaitez télécharger et sélectionnez-le.

  4. Cliquez sur "Mettre à jour" pour finaliser l'insertion de SVG. Vous devriez maintenant avoir des SVG chargés dans la page, que vous pouvez éditer/styliser avec CSS.

Avantages:

Le code qui insère le fichier SVG s'exécute lors du chargement de la page, de sorte que l'élément SVG fait partie des fondements de la page, plutôt que d'être "ajouté" ultérieurement (qui est le problème avec l'autre solution).

Les inconvénients:

Étant donné que le fichier SVG est appelé à partir d'un fichier séparé et qu'il n'est pas combiné de manière significative avec un autre code de la page, toutes les classes doivent être insérées manuellement dans le fichier SVG. Cela signifie que si vous voulez avoir deux versions différentes du même SVG, avec des classes différentes, vous devez utiliser deux fichiers différents. Toutefois, vous pouvez contourner cette limitation et continuer à utiliser le même fichier pour deux SVG de styles différents, en modifiant les classes parent dans les gabarits, puis en utilisant ces classes pour styliser les deux fichiers (par exemple, .parentForStyle1 svg et .parentForStyle2 svg).

De plus, avec cette méthode, vous devez modifier votre code un peu plus que dans l'autre cas, mais ce n'est pas trop grave.

Solution n ° 2: SVGInjector

Cela a fait ce que je voulais, en ce sens que cela m'a permis d'ajouter des SVG visibles dans le DOM et stylisables avec CSS, mais il y a un problème. Comme il utilise un script mis en file d'attente, il ne s'exécute pas avant que la page ait chargé les autres éléments. En tant que tel, peut provoquer des décalages/clignotements étranges pendant le chargement de la page et après.

Que fait SVGinjector?

Une fois implémenté, SVGinjector:

  1. appelle un fichier SVG distinct en tant qu'élément img;
  2. utilise javascript pour analyser le fichier SVG et l'injecter en tant qu'élément en ligne; visible au DOM.
  3. permet au concepteur d’utiliser CSS pour styliser les chemins/éléments SVG individuels.
  4. convertit l'élément img en un élément svg et combine toutes les informations d'en-tête de la balise img existante et du fichier SVG dans la balise SVG.

Comment le mettre en oeuvre

  1. Dans votre fichier de modèle, ajoutez une classe appelée inject-me à votre élément img où vous souhaitez dessiner le fichier SVG. Dans la balise img, liez le fichier SVG à img en utilisant data-src au lieu de src. Voici le code de travail que j'ai mis dans mon fichier de modèle: <img class="funkyLogo inject-me" data-src="<?php echo $logoImg; ?>" alt="logo" />

  2. mettez en file d'attente le script js "svg-injector.min.js" (qui se trouve dans le fichier .Zip de l'injecteur SVG) dans votre "functions.php", ainsi que votre js personnalisé:

    function mytheme_enqueue_front_page_scripts() {
if( is_front_page() )
{
    wp_enqueue_script( 'myJq', "/js/jquery-1.10.2.min.js", array( 'jquery' ), null, true );
    wp_enqueue_script( 'injectSVG', get_stylesheet_directory_uri() . '/js/svg-injector.min.js', array( 'jquery' ), null, true );
    wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), null, true );


    }
} 
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_front_page_scripts' );

  3. inclure le code suivant dans votre fichier "custom.js"

    //For testing in IE8
if (!window.console){ console = {log: function() {}}; };

// Elements to inject
  var mySVGsToInject = document.querySelectorAll('img.inject-me');

// Options
  var injectorOptions = {
    evalScripts: 'once',
    pngFallback: 'assets/png',
    each: function (svg) {
      // Callback after each SVG is injected
      if (svg) console.log('SVG injected: ' + svg.getAttribute('id'));
    }
  };

  // Trigger the injection
  SVGInjector(mySVGsToInject, injectorOptions, function (totalSVGsInjected) {
    // Callback after all SVGs are injected
    console.log('We injected ' + totalSVGsInjected + ' SVG(s)!');
  });

Avantages:

C'est simple, utilise une balise img et il est facile d'éditer des classes dans des modèles

Les inconvénients:

les fichiers SVG sont dessinés plus tard au cours du processus de dessin de page, ce qui peut entraîner des effets de rendu étranges/clignotants/modifications des pages lors du chargement. J'utilise actuellement un personnalisateur et mon fichier SVG est désigné comme logo de l'en-tête. Cela se produit peut-être parce que la balise data-src confond Wordpress. Par conséquent, avant que le js de SVG ne s'exécute, le thème affiche temporairement le "logo" désigné par le texte alt dans la balise img. Si je supprime le texte alt, la div est vide pendant environ une demi-seconde avant l'injection du fichier SVG, mais cela provoque un décalage impair et indésirable des éléments de la page au cours de l'injection.

Alternativement, le problème peut avoir à voir avec l'ordre dans lequel js est exécuté lors du dessin de la page. J'ai appris que js mis en file d'attente s'exécute toujours après le chargement de la page. Par conséquent, le fait que cela soit contrôlé via js à la fin du processus de chargement est très probablement la cause du clignotement. Si quelqu'un peut suggérer une solution qui utilise l'injecteur SVG, mais ne provoque pas de clignement des yeux, ce serait bien de le voir.

1
CoderScissorhands

Désolé de le dire, mais ce n'est pas possible, car aucun des éléments du fichier SVG n'est lu dans le DOM. CSS et Javascript ne les voient pas. Tout ce qu'il voit, c'est le bloc <img>, aucun de son contenu. Vous devez importer vos SVG dans la page pour pouvoir les manipuler.

Découvrez l'article L'article de CSS Tricks sur les SVG

1
socki03