Les ID en conflit dans un fichier SVG après exportation depuis Illustrator

Normalement, Adobe Illustrator donne un ID à chaque élément du SVG qui correspond à son nom dans le fichier.

Si on a le malheur d’avoir deux calques qui portent le même nom, par exemple, Adobe rajoute ’_1_’ à la fin du ID de l’un des deux.

image

Le SVG exporté contient les ID suivants :

<g id=“cases”>
<rect id=“caseTrois_1_” width=“142” height=“138”/>
<rect id=“caseTrois” width=“142” height=“138”/>
<rect id=“caseDeux” width=“142” height=“138”/>
<rect id=“caseUn” width=“142” height=“138”/>
</g>

Lorsqu’on veut manipuler les éléments selon leur ID, cela pose un problème important.

Logiquement, si on supprimait l’un des deux éléments, l’ID de l’autre devrait porter l’ID correct, mais ce n’est pas le cas.

Une fois qu’Illustrator a trouvé nécessaire de modifier l’ID, il ne veut pas le remettre automatiquement.

LA SOLUTION

La solution est d’enlever l’ID qui gêne puis de le remettre :

1. Sélectionner le nom du calque

2. Cmd-X pour le couper, puis retour pour terminer

3. Sélectionner le nom du calque (qui est maintenant générique)

4. Cmd-V pour coller le nom voulu, puis retour pour terminer

Menu hamburger cassé dans thème Weebly “Slick”

En construisant un site e-commerce pour notre client Darla, nous nous sommes rendu compte qu’en utilisant le thème Slick, le menu dynamique avait arrêté de marché.

Après beaucoup de recherches, nous avons trouvé la cause :

  • Il y a un module e-commerce “catégories” sur la page d’accueil
  • Dans les options d’affichage du module, “Nom” a été désélectionné.

En rajoutant le nom au module, les menus ont commencé à fonctionner correctement.

Page trop large dans Edge & Internet Explorer ?

Quand on fait un site à base de pages SVG, parfois on constate que dans les navigateurs Edge ou Internet Explorer (Microsoft), les ascenseurs horizontaux sont trop longs : la page est trop large pour le SVG.

C’est à dire qu’il y a un grand espace blanc à droite de la page.

Ceci arrive quand le SVG principal contient des éléments qui dépassent les bords de la page.

Même si ces éléments ne sont pas visibles, les navigateurs Microsoft laissent de la place pour les accommoder.

Pour régler la situation il suffit d’ajouter à votre CSS :

    svg{
      overflow:hidden;
    }

La transparence ne s’affiche pas correctement dans Firefox/PC

Si on est en mode texte (on est en train d’entrer du texte) dans Illustrator, et que l’on modifie la transparence des caractères, ils ne s’afficheront pas correctement dans Firefox/PC :

image

La solution est de sélectionner le texte avec l’une des flèches puis de modifier la transparence à ce niveau-là.