Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2023-04-21T15:58:23+02:00Les derniers messages parus sur le forum de Zeste de Savoir.Les éléments issus du parsing de fichier XML sont-ils (vraiment) itérables ? , message #2500822023-04-21T15:58:23+02:00adri1/@adri1https://zestedesavoir.com/forums/sujet/16929/les-elements-issus-du-parsing-de-fichier-xml-sont-ils-vraiment-iterables/?page=1#p250082<blockquote>
<p>Il y est dit qu’on peut l’utiliser pour vérifier qu’un objet est itérable, et c’est vrai : tout objet pour lequel <code>isinstance(obj, Iterable)</code> est vrai est un itérable.</p>
</blockquote>
<p>Hmm… En fait, même dire ça est un peu trompeur. <code>isinstance(obj, Iterable)</code> vérifie juste que le protocole <code>Iterable</code> est implémenté dans le sens où une méthode <code>__iter__</code> est implémentée. Il ne vérifie pas qu’il est implémenté correctement (i.e. que <code>__iter__()</code> renvoie un <code>Iterator</code> bien formé). Le fait que <code>isintance(obj, Iterable)</code> soit vrai ne <em>garantie</em> rien sur le fait que <code>iter(obj)</code> ou <code>for item in obj</code> vont se comporter comme attendu, ou autrement dit être <code>Iterable</code> n’implique pas le fait d’être effectivement itérable).</p>
<p>La philosophie "on est entre adultes consentants" de Python ressort ici en disant qu’il est de la responsabilité des développeurs de respecter les conventions, et donc d’implémenter (correctement) <code>__iter__</code> pour que l’implication <code>Iterable</code> ⇒ itérable soit vraie en pratique. Ceci veut notamment dire qu’il est en fait très rarement utile de faire des vérifications avec <code>isinstance</code>, en rejoignant aussi la philosophie "il vaut mieux demander pardon que la permission". Si tu as une fonction qui prend un itérable comme argument, plutôt que de vérifier que c’est une instance de <code>Iterable</code> au runtime, tu as autant de directement itérer dessus et laisser le système d’exceptions faire son travail pour remonter les problèmes. Il est de la responsabilité des utilisateurs de ta librairie de fournir un itérable lorsqu’ils appellent ta fonction.</p>
<p>Évidemment, la philosophie "on est entre adultes consentants" peut se casser la figure assez magistralement lorsque des erreurs de typage passent silencieusement à travers les mailles du filets. Des outils d’analyse statiques comme <code>mypy</code> aident grandement à limiter ces problèmes.</p>Les éléments issus du parsing de fichier XML sont-ils (vraiment) itérables ? , message #2500742023-04-21T14:00:28+02:00AScriabine/@AScriabinehttps://zestedesavoir.com/forums/sujet/16929/les-elements-issus-du-parsing-de-fichier-xml-sont-ils-vraiment-iterables/?page=1#p250074<p>Au temps pour moi ! </p>
<p>Merci encore</p>Les éléments issus du parsing de fichier XML sont-ils (vraiment) itérables ? , message #2500732023-04-21T13:45:59+02:00entwanne/@entwannehttps://zestedesavoir.com/forums/sujet/16929/les-elements-issus-du-parsing-de-fichier-xml-sont-ils-vraiment-iterables/?page=1#p250073<p>Je pense que tu fais référence à <a href="https://zestedesavoir.com/tutoriels/2514/un-zeste-de-python/7-perfectionnement/1-autres-types/#3-3-type">cette section</a> où je présente <code>isinstance</code> et les interfaces de la lib standard telles que <code>Iterable</code>.<br>
Ce n’est pas présenté comme étant « <em>le</em> moyen de savoir si itérable ou non » contrairement à ce que tu dis, mais comme un moyen d’utiliser <code>isinstance</code> pour autre chose qu’une vérification stricte du type. Il y est dit qu’on peut l’utiliser pour vérifier qu’un objet est itérable, et c’est vrai : tout objet pour lequel <code>isinstance(obj, Iterable)</code> est vrai est un itérable.</p>
<p>Le <code>__iter__</code> est la manière habituelle d’identifier un itérable, mais il existe un second protocole qui fait que l’on peut itérer sur un objet : le cas des objets indexables détaillé <a href="https://zestedesavoir.com/tutoriels/954/notions-de-python-avancees/1-starters/2-iterables/#1-1-for">ici</a>.</p>Les éléments issus du parsing de fichier XML sont-ils (vraiment) itérables ? , message #2500702023-04-21T12:09:55+02:00AScriabine/@AScriabinehttps://zestedesavoir.com/forums/sujet/16929/les-elements-issus-du-parsing-de-fichier-xml-sont-ils-vraiment-iterables/?page=1#p250070<p>Merci beaucoup ache, mais alors cela indique que le cours comporte une approximation car il présente la technique <code>isinstance(..., Iterable)</code> comme <em>le</em> moyen de savoir si itérable ou non <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>
<p>Je mentionne donc <a href="/@entwanne" rel="nofollow" class="ping ping-link">@<span class="ping-username">entwanne</span></a> au cas où</p>Les éléments issus du parsing de fichier XML sont-ils (vraiment) itérables ? , message #2500692023-04-21T12:01:57+02:00ache/@achehttps://zestedesavoir.com/forums/sujet/16929/les-elements-issus-du-parsing-de-fichier-xml-sont-ils-vraiment-iterables/?page=1#p250069<p>Depuis la documentation de <code>collections.abc.Iterable</code>:</p>
<blockquote>
<p>class collections.abc.Iterable</p>
<p> ABC for classes that provide the <code>__iter__()</code> method.</p>
<p> Checking isinstance(obj, Iterable) detects classes that are registered as Iterable or that have an <code>__iter__()</code> method, but it does not detect classes that iterate with the <code>__getitem__()</code> method. The only reliable way to determine whether an object is iterable is to call iter(obj).</p>
</blockquote>
<p>Donc je suppose que <code>iter(root)</code> devrait mieux marcher.</p>Les éléments issus du parsing de fichier XML sont-ils (vraiment) itérables ? , message #2500622023-04-21T10:09:38+02:00AScriabine/@AScriabinehttps://zestedesavoir.com/forums/sujet/16929/les-elements-issus-du-parsing-de-fichier-xml-sont-ils-vraiment-iterables/?page=1#p250062<p>Bonjour, </p>
<p>Je suis actuellement le cours de Python du site.
En faisant des tests, je tombe sur quelque chose de curieux compte tenu de ce qui est avancé dans le cours.</p>
<p>Voici le petit code sur lequel je m’appuie :</p>
<div class="hljs-code-div hljs-code-text"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span></div><pre><code class="hljs language-text">import xml.etree.ElementTree as ET
tree = ET.parse("fichier.xml")
root = tree.getroot()
for elt in root:
print(elt) #ça marche donc root est itérable ?
from collections.abc import Iterable
print(isinstance(root, Iterable)) #renvoie False !!
</code></pre></div>
<p>Alors voilà donc le problème : il me semble que si on peut itérer dessus avec un for, <code>isinstance(..., Iterable)</code> devrait renvoyer True ?</p>
<p>Pour tester ce code, il faut un fichier xml de test sous la main donc je vous donne le mien <img src="/static/smileys/svg/hihi.svg" alt="^^" class="smiley"> </p>
<div class="hljs-code-div hljs-code-text"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span></div><pre><code class="hljs language-text"><joueur>
<taille>
<assis> 120cm </assis>
<debout> 175cm </debout>
</taille>
<age> 50 </age>
</joueur>
</code></pre></div>
<p>Merci pour l’aide !!</p>Struturez vos données avec XML, message #2394942021-12-10T22:32:04+01:00Migwel/@Migwelhttps://zestedesavoir.com/forums/sujet/15183/struturez-vos-donnees-avec-xml/?page=1#p239494<p><a href="/@rolandl" rel="nofollow" class="ping ping-link">@<span class="ping-username">rolandl</span></a> Désolé de réagir si tard mais c’est parfait que la license te permette de diffuser ton tutoriel ici aussi. La licence est bien personnalisable, on a même <a href="https://zestedesavoir.com/tutoriels/261/le-droit-dauteur-creative-commons-et-les-licences-sur-zeste-de-savoir/">un tutoriel complet</a> à ce sujet. Donc pas de souci à ce niveau-là.</p>
<p>As-tu besoin d’aide pour faire l’import et lancer l’étape de validation ? N’hésite pas à me / nous contacter si tu as besoin d’aide.</p>Struturez vos données avec XML, message #2332792021-04-15T23:34:26+02:00rolandl/@rolandlhttps://zestedesavoir.com/forums/sujet/15183/struturez-vos-donnees-avec-xml/?page=1#p233279<p>Bonjour à tous,</p>
<p>Bon, j’ai pris un peu (beaucoup) mon temps pour relire l’ensemble des contrats que j’ai pu signer avec OpenClassrooms, que ça soit la publication du livre ou le rachat de son exploitation en 2018.</p>
<p>Dans le dernier contrat que j’ai, en rapport avec le rachat de l’exploitation du cours, le paragraphe suivant figure :</p>
<blockquote>
<p>Les Parties conviennent que l’ensemble des droits cédés au moyen du présent Contrat sera exploité par OC sous la licence Creative Commons CC BY-SA 4.0 dite « Attribution - Partage dans les mêmes Conditions 4.0 » et dont les caractéristiques complètes sont consultables sur le site Internet <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode.fr">https://creativecommons.org/licenses/by-sa/4.0/legalcode.fr</a>. En conséquence, les acquéreurs et utilisateurs des Vidéos seront libres de reproduire, distribuer, communiquer, adapter celles-ci, y compris à des fins commerciales, à la condition expresse que la création qui en résulte ne soit diffusée dans les mêmes conditions, et que celle-ci mentionne le nom de l’auteur de la manière indiquée par OC. Cette mention du nom de l’auteur ne doit toutefois pas être effectuée d’une manière qui suggérerait que ce dernier ou OC soutiennent ou approuvent l’utilisation ainsi faite des Vidéos.</p>
</blockquote>
<p>Sur le site, le tutoriel, avant d’être supprimé, était quant à lui diffusé sous la licence <a href="https://creativecommons.org/licenses/by-sa/4.0/">https://creativecommons.org/licenses/by-sa/4.0/</a>. Donc ça me permet de copier, distribuer et communiquer le matériel par tous moyens et sous tous formats.</p>
<p>La seule condition est de respecter la licence original. J’ai vu que les tutoriels sur ZDS avait bien une licence, mais je ne sais pas si elle est personnalisable ou pas.</p>
<p>Mais à lecture de tout ça, je pense qu’il n’y a pas de soucis pour proposer le cours ici <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>Struturez vos données avec XML, message #2327102021-03-27T14:06:52+01:00Stéph/@St%C3%A9phhttps://zestedesavoir.com/forums/sujet/15183/struturez-vos-donnees-avec-xml/?page=1#p232710<p>Salut,</p>
<p>Après une lecture en diagonale, j’ai eu assez vite envie de le reprendre depuis le début. C’est bien structuré, clair et agréable à lire je trouve.</p>
<blockquote>
<p>Ma question est donc la suivante : est-ce mon tutoriel à sa place sur ce site sachant qu’il et aussi sur mon site perso ? </p>
</blockquote>
<blockquote>
<p>Je vois par contre que ton contenu est aussi publié en livre, est-ce que ton contrat d’édition t’autorise cette diffusion ?</p>
</blockquote>
<p>J’espère, ce tuto a toute sa place je pense.</p>Struturez vos données avec XML, message #2326242021-03-25T15:27:27+01:00rolandl/@rolandlhttps://zestedesavoir.com/forums/sujet/15183/struturez-vos-donnees-avec-xml/?page=1#p232624<p>Bonjour,</p>
<p>Merci beaucoup pour cette réponse <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"> J’avais bien lu le guide du contributeur et notamment et notamment la section "<a href="https://zestedesavoir.com/tutoriels/705/le-guide-du-contributeur/828_contribuer-au-contenu/5467_generalites/#7-les-cas-particuliers">cas particuliers</a>"</p>
<p>Mais comme cette section indique :</p>
<blockquote>
<p>Pour finir, ce n’est pas parce qu’un contenu a été publié ailleurs qu’il le sera forcément sur ZdS. Assurez-vous donc de la qualité de celui-ci et discutez-en avec d’autres membres avant d’entreprendre quoi que ce soit.</p>
</blockquote>
<p>Je voulais m’assurer que mon tutoriel avait bien sa place <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>
<blockquote>
<p>Je vois par contre que ton contenu est aussi publié en livre, est-ce que ton contrat d’édition t’autorise cette diffusion ?</p>
</blockquote>
<p>Par rapport à la licence du cours, normalement il n’y a pas de soucis ! Mais dans le doute, je vais me replonger dans les contrats que j’ai signé à l’époque pour m’assurer qu’il n’y a pas de contre-indications. Si je ne trouve rien qui contredit ça, alors je posterai le cours ici <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>Struturez vos données avec XML, message #2326212021-03-25T14:26:46+01:00adri1/@adri1https://zestedesavoir.com/forums/sujet/15183/struturez-vos-donnees-avec-xml/?page=1#p232621<p>Salut,</p>
<blockquote>
<p>Il y a peu, je me suis souvenu de l’existence de ZDS. Ma question est donc la suivante : est-ce mon tutoriel à sa place sur ce site sachant qu’il et aussi sur mon site perso ?</p>
</blockquote>
<p>Ce n’est pas un problème, on peut explicitement marquer ton site comme étant la source originale du contenu pour que tu sois référencé correctement et a contrario qu’on ne soit pas plombé pour duplication de contenu. Il faut juste bien le rappeler à la validation pour ne pas qu’on oublie.</p>
<p>Je vois par contre que ton contenu est aussi publié en livre, est-ce que ton contrat d’édition t’autorise cette diffusion ?</p>Struturez vos données avec XML, message #2326202021-03-25T14:18:55+01:00rolandl/@rolandlhttps://zestedesavoir.com/forums/sujet/15183/struturez-vos-donnees-avec-xml/?page=1#p232620<p>Bonjour,</p>
<p>Je me permets de poster ici afin de vérifier que mon tutoriel aurait bien sa place ici <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>
<p>En 2012, j’ai écrit sur le Site du Zéro un tutoriel sur XML : "Structurez vos données avec XML". Peu de temos après, le tutoriel était passé dans les tutos "officiels" du site. Il a ensuite été adapté en livre en 2014 aux éditions OpenClassrooms puis certifiant quand OpenClassrooms a commencé à proposer des offres payantes.</p>
<p>Depuis 2015, le tutoriel "vivait" tranquillement sur le site, mais OpenClassrooms a décidé, fin 2020, de supprimer le cours du site. J’imagine que le cours ne répondait plus à la ligne éditoriale du site qui se tourne surtout vers la vidéo.</p>
<p>Puisque le cours était sous licence CC BY-SA 4.0, et que je trouvais dommage de "perdre" tant d’heures de travail, j’ai monté un site sur lequel republier le tutoriel : <a href="https://tutoriel-xml.rolandl.fr/">https://tutoriel-xml.rolandl.fr/</a></p>
<p>Il y a peu, je me suis souvenu de l’existence de ZDS. Ma question est donc la suivante : est-ce mon tutoriel à sa place sur ce site sachant qu’il et aussi sur mon site perso ?</p>
<p>Merci d’avance pour vos retours.
Ludovic</p>Transformez vos XML avec react-xml-transformer, message #2252182020-08-24T13:43:54+02:00rayan008/@rayan008https://zestedesavoir.com/forums/sujet/14385/transformez-vos-xml-avec-react-xml-transformer/?page=1#p225218<p>Intéressé par ce produit.</p>
<p><a href="https://scrabblewordfinder.vip">scrabble word finder</a></p>Transformez vos XML avec react-xml-transformer, message #2244652020-07-26T15:55:37+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/14385/transformez-vos-xml-avec-react-xml-transformer/?page=1#p224465<p>Hello !</p>
<p>Je me permets de partager ici avec vous, car je pense que ça peut éventuellement en intéresser un ou deux.</p>
<h4 id="motivations">Motivations<a aria-hidden="true" href="#motivations"><span class="icon icon-link"></span></a></h4>
<p>Pour la petite histoire, je suis en train de travailler sur un éditeur graphique pour du XML-TEI/DocBook/MathBook. Pour faire ça, évidemment on a besoin d’une façon ou d’une autre le transformer en contenu affichable à l’utilisateur, et j’ai choisi de le transformer en HTML pour pouvoir fournir un éditeur sur le Web. </p>
<p>Évidemment, la solution standard serait de faire des transformations en XSLT et de les afficher à l’utilisateur, ce qui n’est, au final, pas très difficile à faire avec un <code>XSLTProcessor()</code> natif ou <code>SaxonJS</code>, qui permet même le XSLT 3. Les problèmes arrivent quand on essaie de modifier le XML source.</p>
<p>J’ai été inspiré par <a href="http://blogs.avalonconsult.com/blog/generic/elegant-contenteditable-solution-for-xml/">ce blog</a> où l’auteur nous fait une démo de ce qui est possible avec en gros une requête XQuery. Sauf que c’est pas si simple d’exécuter une requête XQuery dans un navigateur; et, de plus, XQuery ne permet nativement pas de modifier du XML.</p>
<p>C’est à ce problème que j’essaie de répondre avec ce projet: <em>éditer et transformer du XML en temps réel</em>.</p>
<h4 id="comment-ça-fonctionne">Comment ça fonctionne<a aria-hidden="true" href="#comment-ça-fonctionne"><span class="icon icon-link"></span></a></h4>
<p>Comme un composant React standard, à l’exception près qu’il est enregistré dans un contexte global. Ensuite, à la façon de XSLT, il suffit d’appliquer le comportement <code>ApplyTemplates</code> fourni, et la bibliothèque détermine automagiquement le bon modèle à utiliser. </p>
<p>Je vous propose de jeter un coup d’oeil au <a href="https://github.com/publica-re/react-xml-transformer/tree/master/example/src">code source de la démo</a> pour vous faire une idée du fonctionnement. Ce qui est intéressant est dans le dossier <code>Components</code>. </p>
<h4 id="état-actuel">État actuel<a aria-hidden="true" href="#état-actuel"><span class="icon icon-link"></span></a></h4>
<p>J’ai actuellement une <a href="https://react-xml-transformer.publica.re/demo/">démo</a> fonctionnelle, qui permet de démontrer le concept avec un résultat que je trouve assez sympa, et qui supporte la plupart des concepts qui me semblent utiles pour l’instant.</p>
<p>Maintenant, il y a encore plein de travail à faire: documenter est une chose, éviter encore quelques rendus inutiles, mais surtout écrire des tests pour garantir la fiabilité du projet. Si vous lisez le TypeScript et que vous avez un peu de temps disponible, j’accueille volontiers toute <a href="https://github.com/publica-re/react-xml-transformer">contribution</a>. (-:</p>
<h4 id="aperçu">Aperçu<a aria-hidden="true" href="#aperçu"><span class="icon icon-link"></span></a></h4>
<figure><img src="https://i.imgur.com/qQ0iUAl.gif" alt="Mise à jour interactive"><figcaption>Mise à jour interactive</figcaption></figure>
<h4 id="installer-et-liens">Installer et liens<a aria-hidden="true" href="#installer-et-liens"><span class="icon icon-link"></span></a></h4>
<p>La bibliothèque est sur NPM, donc il vous suffit de faire un petit <code>yarn add react-xml-transformer</code> pour commencer à l’utiliser.</p>
<p>Pour les curieux, <a href="https://github.com/publica-re/react-xml-transformer">GitHub</a>, <a href="https://react-xml-transformer.publica.re/demo/">démonstration</a> et <a href="https://react-xml-transformer.publica.re/">documentation</a>.</p>
<p>Merci pour la lecture, et je prends très volontiers des retours, d’autant plus que c’est ma première bibliothèque TypeScript !</p>Changer la couleur d'un SVG XML dans background-image ?, message #2192922020-04-20T15:19:22+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p219292<p>J’ai découvert aussi: <code><svg class="svg-icon -small icon-windows"><use xlink:href="#icon-windows"></use></svg></code> On peut rappeler un svg apparemment <img src="/static/smileys/huh.png" alt=":o" class="smiley"></p>Changer la couleur d'un SVG XML dans background-image ?, message #2009362019-03-27T07:31:56+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p200936<p>Si je souhaite mettre un background rouge comment je fais ? Je dois passer par l’élément parent ? De plus le mask s’applique aussi au bordure. :/</p>
<p>Ma solution actuelle : Créer un enfant icon et mettre le svg dedans.</p>
<p><strong>EDIT :</strong> Au final je pense utiliser un élément <code>button</code> au lieu d’un <code>input</code>, et de faire <code>button::after</code> pour l’icone.</p>Changer la couleur d'un SVG XML dans background-image ?, message #1963462019-01-03T10:46:21+01:00Leeroy Jenkins/@Leeroy%20Jenkinshttps://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p196346<p>tu n’auras pas la compatibilité internet explorer non plus <img src="/static/smileys/rire.gif" alt=":lol:" class="smiley"> mais on s’en fou </p>
<p>teste en rajoutant les préfix -webkit devant mask-image et mask-repeat et tu nous dis si ça fonctionne <img src="/static/smileys/smile.png" alt=":)" class="smiley"></p>Changer la couleur d'un SVG XML dans background-image ?, message #1963422019-01-03T09:38:16+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p196342<p><img src="/static/smileys/huh.png" alt=":o" class="smiley"></p>
<p><a href="https://codepen.io/anon/pen/GPQRqd">https://codepen.io/anon/pen/GPQRqd</a> Merci ! <img src="/static/smileys/heureux.png" alt=":D" class="smiley"> Par contre je ne sais si le support sur mobile (dernière version de chrome) est supporté <a href="https://developer.mozilla.org/fr/docs/Web/CSS/mask-repeat">MDN</a>.</p>Changer la couleur d'un SVG XML dans background-image ?, message #1963372019-01-03T09:03:08+01:00Leeroy Jenkins/@Leeroy%20Jenkinshttps://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p196337<p>Bonjour,</p>
<p>je ne suis jamais les tutos sur css-tricks, c’est toujours chaotique… </p>
<p>essaye de remplacer background par mask (attention à la compatibilité):</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.bg</span> {
<span class="hljs-attribute">background-color</span>: red;
<span class="hljs-attribute">mask-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'data:image/svg+xml;utf8,<svg name="vcard_svg" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 1131q0-64-9-117.5t-29.5-103-60.5-78-97-28.5q-6 4-30 18t-37.5 21.5-35.5 17.5-43 14.5-42 4.5-42-4.5-43-14.5-35.5-17.5-37.5-21.5-30-18q-57 0-97 28.5t-60.5 78-29.5 103-9 117.5 37 106.5 91 42.5h512q54 0 91-42.5t37-106.5zm-157-520q0-94-66.5-160.5t-160.5-66.5-160.5 66.5-66.5 160.5 66.5 160.5 160.5 66.5 160.5-66.5 66.5-160.5zm925 509v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm0-260v-56q0-15-10.5-25.5t-25.5-10.5h-568q-15 0-25.5 10.5t-10.5 25.5v56q0 15 10.5 25.5t25.5 10.5h568q15 0 25.5-10.5t10.5-25.5zm0-252v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm256-320v1216q0 66-47 113t-113 47h-352v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-768v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-352q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z"></path></svg>'</span>);
<span class="hljs-attribute">height</span>:<span class="hljs-number">50px</span>;
<span class="hljs-attribute">width</span>:<span class="hljs-number">50px</span>;
<span class="hljs-attribute">mask-repeat</span>: no-repeat;
}
</code></pre></div>
<p>test sur <a href="https://codepen.io/shoooryuken/pen/xmYKjb">https://codepen.io/shoooryuken/pen/xmYKjb</a></p>Changer la couleur d'un SVG XML dans background-image ?, message #1963292019-01-02T23:27:32+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p196329<p>J’utilise la règle sur un hover avec une transition (CSS3), donc c’est assez problématique. :/ Le mettre dans le svg n’est pas possible j’utilise trop de combinaison CSS et certaine ne permettent pas d’avoir le style dans le CSS. :/</p>Changer la couleur d'un SVG XML dans background-image ?, message #1963012019-01-02T20:36:11+01:00Anton62/@Anton62https://zestedesavoir.com/forums/sujet/11874/changer-la-couleur-dun-svg-xml-dans-background-image/?page=1#p196301<p>Salut,</p>
<p>Non, tu ne pourras pas modifier la couleur en css ni en javascript, parce que si tu utilises un svg en tant qu’image externe (dans une balise <code><img></code> ou dans le css comme tu l’as fait), les balises du svg ne sont pas chargées dans le DOM et ne sont donc pas accessibles.</p>
<p>Il faut mettre la couleur directement dans le svg en ajoutant <code>fill="red"</code> à la balise <code><path></code>, comme ceci:</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.bg</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'data:image/svg+xml;utf8,<svg name="vcard_svg" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M1024 1131q0-64-9-117.5t-29.5-103-60.5-78-97-28.5q-6 4-30 18t-37.5 21.5-35.5 17.5-43 14.5-42 4.5-42-4.5-43-14.5-35.5-17.5-37.5-21.5-30-18q-57 0-97 28.5t-60.5 78-29.5 103-9 117.5 37 106.5 91 42.5h512q54 0 91-42.5t37-106.5zm-157-520q0-94-66.5-160.5t-160.5-66.5-160.5 66.5-66.5 160.5 66.5 160.5 160.5 66.5 160.5-66.5 66.5-160.5zm925 509v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm0-260v-56q0-15-10.5-25.5t-25.5-10.5h-568q-15 0-25.5 10.5t-10.5 25.5v56q0 15 10.5 25.5t25.5 10.5h568q15 0 25.5-10.5t10.5-25.5zm0-252v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm256-320v1216q0 66-47 113t-113 47h-352v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-768v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-352q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z"></path></svg>'</span>);
<span class="hljs-attribute">height</span>:<span class="hljs-number">50px</span>;
<span class="hljs-attribute">width</span>:<span class="hljs-number">50px</span>;
<span class="hljs-attribute">background-repeat</span>:no-repeat;
}
</code></pre></div>