Arka Plan resmi olarak servis edilirken SVG Renk Değiştirme doldurmak

SORU

13 Kasım 2012, Salı

Arka Plan resmi olarak servis edilirken SVG Renk Değiştirme doldurmak

SVG çıkış gibi sadece CSS ile dolgu renklerini değiştirmek mümkün duyuyorum sayfa kodunu doğrudan satır içi yerleştirme:

path.mystar {
    fill: blue;
}

path.mycircle {
    fill: green;
}

Bu işleri bir şekilde değiştirmek için arıyorum ancak büyük, "dolgu" olarak sunulan bir SVG özniteliği arka PLAN resmi.

html {      
    background-image: url(../img/bg.svg);
}

Nasıl renkleri değiştirebilir miyim? Hatta mümkün mü?

Başvuru için, burada dış SVG dosyası içeriğini

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

CEVAP

13 Kasım 2012, Salı

Bunu yapmak için tek yolu sunucu tarafında çözüm tür sizin svg server için olduğunu düşünüyorum. Sadece svg parametreleri göre verir, bir kaynak sunucu tarafı oluşturmak ve belirli bir url üzerine çekersin.

O zaman sadece css url kullanın.

Bir arka plan ımg çünkü, DOM parçası değil ve bunu değiştiremezsiniz. Başka bir olasılık olurdu için kullanmak düzenli olarak, gömmek bir sayfa normal bir şekilde, ama pozisyon kesinlikle, tam genişlik ve yükseklik bir sayfa ve z-index css özelliği koymak arkasında tüm diğer DOM öğeleri bir sayfa.

Bunu Paylaş: