Spécifier un SVG comme une image de fond et AUSSI le style le SVG dans le CSS?

Est-il possible de spécifier une SVG comme une image de fond et AUSSI le style le SVG dans le même fichier CSS?

Je suis très à l'aise placement, la mise à l'échelle et le découpage des images SVG que ce soit des fichiers individuels ou des sprites, mais je n'ai pas été en mesure de déterminer s'il est possible de style le SVG dans le même fichier CSS comme le définit comme une image d'arrière-plan.

Pseudo CSS, j'aimerais faire la suite pour varier la couleur de forme simple basé sur la classe de l'élément parent:

element1 {
 background-image(icon.svg);
}

element1.black .svg-pathclass {
 fill: #000000;
}

element1.white .svg-pathclass {
 fill: #ffffff;
}

évidemment, cela suppose un chemin dans le SVG avoir de la classe .svg-pathclass

est-ce possible?

InformationsquelleAutor JSDBroughton | 2011-09-09
  1. 17

    Non, ce n'est pas possible. Le SVG doit être préparé dans un seul document (qui peut être un les données URI ou une référence externe fichier) et puis utilisée comme arrière-plan dans un autre fichier.

    • il semble de cette façon. merci. serait bien si hein?
    • Je ne pense pas qu'il serait bien, je pense qu'il serait la cause de la circulaire de référence de problèmes. 🙂
    • oui, vous avez raison. l'utilisation de neat dans ce cas est liée à: "je souhaite que ce travail, dans le but que j'ai droit en l'absence de considérer les implications plus larges" 😀
    InformationsquelleAutor Phrogz
  2. 6

    Vous pouvez utiliser SVG et CSS des masques pour recréer cet effet, puis utilisez normal CSS de style à l'intérieur de la SVG, même background-image

    -webkit-mask:   url(filename.svg) 50% 50% / 100px 50px no-repeat;
    -o-mask:    url(filename.svg) 50% 50% / 100px 50px no-repeat;
    -ms-mask:   url(filename.svg) 50% 50% / 100px 50px no-repeat;

background-color: red;
background-image: url(animated.gif);

/* Filename, Position /Size, Repeat */
/* Modernizr.cssmask is the test needed to pass - snippet below */

    Vous pouvez l'utiliser pour créer des ombres portées en ajoutant un element à la DOM et style, avec une baisse de z-index et le réglage de l'opacité.

    Espère que ça aide!

    Edit: Les Liens

    • sauf si -o et-ms n'existe pas :/
    • Ce serait bien, peut ne pas fonctionner, selon la complexité de l'image est & il n'est pas pris en charge par tous les navigateurs: caniuse.com/#feat=css-masks.
    • Doesnt work in de firefox.
    InformationsquelleAutor Hugo Scott-Slade
  3. 6

    Il est possible pour ceux qui peuvent utiliser les préprocesseurs dans la production, par la "inline" arrière-plan SVG, et peu de SASS mixins, qui "tranche" tout svg charabia, pour obtenir l'accès aux pièces que vous souhaitez manipuler via SASS variables.

    Dans votre scénario original vous avez un élément

    <div class="element1"></div>,

    si vous avez besoin d'un mixin/function qui inline SVG pour vous. Disons que vous voulez de contrôle de la fill, donc: 

    @mixin inline-svg($color, $svg-content) {
  $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
  $end:   '</svg>';

  background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}

    où $svg-content variable est votre <svg> des trucs à l'exclusion de <style> élément auquel vous souhaitez accéder à partir de l'intérieur de la mixin) et l'emballage svg balise, c'est à dire:
    $svg-content = "<path .... />"

    Cette juste besoin d'être inclus avec des valeurs transmises à l'intérieur de:

    @include inline-svg(salmon, $svg-content);

    De la somme de toute chose, c'est un exemple SASS code: 

    $svg-content = "<path .... />"

@mixin inline-svg($color, $svg-content) {
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
    $end:   '</svg>';

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}  

.element1 {
    @include inline-svg(rgba(0,0,0,0.6), $svg-content);
}

    Je pense que les possibilités sont assez grandes (il y a aussi des limitations d'ici à cette approche). J'ai fait passer un SASS map à mon mixin avec css styles définis comme key, value paire, pour injecter des tas de css styles à la <style> partie de svg.

    Il est donc techniquement possible, mais nécessitent plus de complexité, mais une fois que vous obtenez ce fait, vous obtiendrez les avantages de la réutilisation de cette mixin tout au long de votre projet(s), ce qui est cool .

    • L'origine de cas d'utilisation à l'esprit, c'était pour permettre UX d'événements pour faire automatiquement les changements d'apparence de l'enfant éléments SVG peut-être avec data-mode attributs par exemple. La demande était d'utiliser un seul format SVG pour faciliter l'interaction avec un minimum d'encombrement. Mais bon exemple
    • merci pour cette, exactement ce dont j'avais besoin
    • Merci! qui a fait le tour!
    InformationsquelleAutor robjez