Comment faire un "titre" (info-bulle, pop-up, texte alt-text) dans un CSS à utiliser avec SVG, sans JavaScript

Il est assez facile de créer une fenêtre contextuelle avec l'attribut "Title" dans SVG. Mais comment réalisez-vous le même effet avec CSS?

C'est pour une illustration que je fais pour Wikimedia et je m'efforce d'avoir la plupart des choses que d'autres Wikipedians aimeraient corriger dans une feuille de style embarquée, avec des propriétés de style regroupées par un sujet réel. La plupart des éditeurs Wikipedia sont des analphabètes informatiques, vous ne pouvez pas qu'ils recherchent à travers beaucoup de code pour effectuer leurs modifications et si elles doivent changer tout sauf valeurs de CSS simples dans le code, vous obtenez probablement un mauvais gâchis de celui-ci. . Si je fais cela dur pour leur pauvre cerveau, alors plus tôt ou tard, quelqu'un fera le dossier immuable à l'aide d'un encre, d'illustrateur ou d'un autre éditeur vectoriel tout aussi horrible.

Je pourrais utiliser JavaScript, mais cela rendrait l'illustration moins accessible et rendrait le code encore plus confus pour les personnes qui ont besoin de le modifier. En outre, certains fichiers SVG utilisant JavaScript ont été retirés de Wikimedia à cause de cela, mais je ne sais pas si c'est une règle absolue.

Je viens de découvrir lorsque j'ai validé mon fichier que l'attribut de titre dans SVG n'est pas autorisé où je l'utilise, mais cela fonctionne avec la plupart des navigateurs. Selon la norme, vous devez utiliser l'élément title, mais cela ne semble pas fonctionner avec des navigateurs. En outre, selon la norme, je pourrais donner un attribut de titre à un élément de style, mais cela ne semble pas fonctionner avec un navigateur et cela nécessiterait d'utiliser 180 éléments de style au lieu d'un seul (le code est généré par un script, il n'est donc pas un problème pour moi de les créer, c'est que cela rendrait le code beaucoup plus grand et plus difficile à comprendre).

Les deux "réponses" que j'ai obtenues jusqu'à présent n'ont pas été pour la question que j'ai posée et que je ne suis même pas utile à distance.

i Ne vous souciez pas si l'image est éditable dans l'encre . L'inkscape est un bon outil pour créer des images bitmap (même si vous devez les exécuter à travers un autre programme pour obtenir une meilleure compression par la suite). Inkscape suce à la création de fichiers SVG (ou de fichiers image basés sur des vecteurs destinés à un public, les fichiers d'image basés sur des vecteurs de fichiers d'image crée uniquement sont vraiment utiles avec l'encart), l'encre est un outil vraiment, vraiment vraiment pauvre choisir pour créer des images SVG destinées à un produit final; Sodipodi était un bon outil pour cela, mais l'inkscape n'est pas Sodipodi, uniquement sur la base de Sodipodi (malheureusement, l'ancienne version C de Sodipodi ne fonctionne pas bien sur les systèmes informatiques modernes et la version C ++ n'a jamais été terminée). je veux rendre mon image facile à éditer avec un éditeur de texte , de sorte qu'aucun wikipedian n'est tenté d'utiliser des inconvénients et de rendre le fichier homatismable (et dans le processus augmenter la taille d'un peu moins de 2 Mo à Plus de 60 Mo, si vous l'enregistrez dans Inkscape en tant qu'image SVG "standard" (qui ne donne pas toujours à un fichier de complaisance standard), les Inkscapes possèdent leur propre format de fichier basé sur SVG constitue des fichiers encore plus grands).

Je ne pense pas que Wikipedia autorise JavaScript dans les images SVG, donc JavaScript est hors de la question .

Je sais déjà comment créer des info-bulles avec JavaScript et deux méthodes différentes pour les créer dans SVG (mais pas dans CSS incorporé dans SVG). La raison, en plus de celle déjà mentionnée dans la question initiale, que je ne souhaite pas utiliser le code SVG pour les info-bulles est qu'aucun navigateur Web ne prend en charge la norme, mais les téléspectateurs SVG (mais pas la non-standard. des info-bulles qui fonctionnent avec des navigateurs), alors une personne qui apporte manuellement une correction manuelle à une info-bulle dans le fichier (avec un éditeur de texte), devrait modifier le texte dans deux endroits différents, probablement, avec le temps, ce qui entraîne des info-bulles différentes lors de la visualisation. dans différents navigateurs / téléspectateurs.