Je veux placer des images SVG avant certains éléments sélectionnés. J'utilise jQuery mais ce n'est pas pertinent.
Je voudrais que l' :beforeélément soit le suivant:
#mydiv:before {
content: '<svg.. code here</svg>';
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}
Si je le fais comme indiqué ci-dessus, il affiche simplement la chaîne. J'ai vérifié les spécifications et il semble y avoir des restrictions sur le contenu. Y a-t-il un moyen de contourner cette restriction? Seul le contenu CSS est pertinent pour ma question.
Réponses:
Oui, vous pouvez! Je viens de tester cela et cela fonctionne très bien, c'est génial! Cela ne fonctionne toujours pas avec html, mais c'est le cas avec svg.
Dans mon index.html j'ai:
Et mon test.svg ressemble à ceci:
la source
content: url(path/to/my.svg). Cela ne signifie pas nécessairement que cela fonctionnerait avec la bibliothèque d'infobulles jQuery UI.content: url(mysprite.svg#my-icon)ne fera pas apparaître votre icône. j'aimerais qu'on me prouve le contraire, cependant :)Oui. Vous pouvez ajouter le SVG comme image d'arrière-plan d'un vide: après ou: avant. Voici:
la source
background-sizen'est pas supporté dans Opera Mini. C'est tellement frustrant.<?xml version="1.0" encoding="utf-8"?>au début de mon fichier svg pour le faire fonctionner.assurez-vous que votre svg ne contient pas de guillemets doubles et uriencode tous les symboles #.
la source
url('file.svg')fonctionne cependant.xmlns='http://www.w3.org/2000/svg'la partie <svg> pour fonctionner dans Chrome 66.x. Par exemple - petit chevron sera:content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");L'utilisation des sprites CSS et de l'uri de données offre des avantages supplémentaires intéressants comme un chargement rapide et moins de demandes ET nous obtenons le support IE8 en utilisant image / base64:
Exemple de codepen utilisant SVG
HTML
CSS
Pour IE8, passez à ceci:
la source
scale svget vous trouverez de nombreuses autres façonsOutil pratique pour l'encodage d' URL SVG encodage
la source
Soyez prudent, toutes les autres réponses ont un problème dans IE.
Permet d'avoir cette situation - bouton avec icône ajoutée. Tous les navigateurs gèrent cela correctement, mais IE prend la largeur de l'élément et met à l'échelle le contenu avant pour l'adapter. JSFiddle
La solution consiste à définir la taille sur l'élément avant et à le laisser où il se trouve:
Les solutions
background-image+background-sizefonctionnent également, mais sont peu pratiques, car vous devez spécifier deux fois les mêmes tailles.Le résultat dans IE11:
la source
Pour approfondir ce sujet. Si vous souhaitez ajouter des icônes Font Awesome 5, vous devez ajouter du CSS supplémentaire.
Les icônes par défaut ont des classes
svg-inline--faetfa-w-*.Il y a aussi des classes comme modificateur
fa-lg,fa-rotate-*et d' autres. Vous devez vérifier lesvg-with-js.cssfichier et trouver le CSS approprié pour cela.Vous devez ajouter votre propre couleur à l'icône css sinon elle sera noire par défaut, par exemple
fill='%23f00'où%23est encodée#.la source
la source