Arka plan resmi olarak SVG belirtin ve CSS'de SVG'yi SVG stilinde mi belirtin?

Question

Arka plan görüntüsü olarak SVG belirtmek mümkün mü ve SVG aynı CSS dosyasında SVG stilinde mi?

Tek bir dosya veya sprites olarak SVG görüntülerini yerleştirme, ölçekleme ve kırpma işlemlerini çok rahat yapıyorum, ancak SVG'yi aynı CSS dosyasında düzenleyebiliyor olsam da çalışamıyorum. arka plan görüntüsü. Sözde BB'de

i ebeveyn elemanın sınıfına dayalı basit şeklin rengini değiştirmek için aşağıdakileri yapmak istiyorum:

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

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

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

Açıkçası bu SVG sahip sınıf .SVG bir yol varsayar -cathclass

Bu mümkün mü?

Answer 1

Hayır, bu mümkün değil. SVG, bir belgede (bir data URI veya harici olarak başvurulan bir dosya olabilir) ve ve başka bir dosyada arka plan olarak kullanılmalıdır.

Answer 2

Sen bir element için ekleyerek damla gölgeler oluşturmak için kullanabilir CSS bile, 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 */ 

SVG içini stil, daha sonra normale kullanmak bu etkiyi yaratmak için SVG ve CSS maskeleri kullanabilirsiniz DOM ve daha düşük bir z-endeksi ve bir opaklık ayarlayarak şekillendiriyor.

Bu yardımcı olur umarım!

Düzenleme:

• Modernizr Testi Bağlantılar - http://pastebin.com/w4eVbEKr
• Biraz daha bilgi - "inlining" arka plan SVG tarafından, üretimde preprocessors kullanabilirsiniz olanlar için aslında mümkün https://www.webkit.org/blog/181/css-masks/

Answer 3

, ve SASS variables üzerinden işlemek istediğiniz parçalara erişmek için svg anlamsız "dilimlemek" olan SASS mixins. Orijinal senaryoda

Eğer

Böylece sizin için SVG iç fonksiyon bir mixin/function ihtiyaç
<div class="element1"></div>, bir elementi vardır.böylece, Diyelim ki fill ait kontrol etmek istediğimizi varsayalım: $svg-content değişken <style> (eğer mixin iç erişmek istediğiniz) elemanı ve svg etiketi sarma ,, yani hariç sizin <svg> şeyler

@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}'); 
} 

olduğu:
@include inline-svg(salmon, $svg-content);

whol Özetle: $svg-content = "<path .... />"

Bu sadece ihtiyaç

içine geçirilen değerlerle dahil edilecek Burada olasılıklar (sınırlamalar bu yaklaşıma burada da vardır) oldukça büyük olduğunu düşünüyorum

$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); 
} 

: e şey yukarı, bu bir örnektir SUKDÖ'nün kodudur. Aslında key olarak tanımlanan benim mixincss ile stilleri, value çifti, bir SASS mapsvg ait <style> kısmına css stilleri sürü enjekte etmek geçmektedir.

Teknik olarak mümkün, ancak daha fazla bir uyumluluk gerektirir, ancak bunu tamamladıktan sonra, projeniz (ler) iniz boyunca bu mixin'u yeniden kullanmanın yararlarından yararlanabilirsiniz.