birkaç SVG dosyalarını içeren bir IMG etiketi

Bir sayfam var, tarafından gömülü bir SVG CSS bağlanma. Bu SVG dosyalarının stilini senkronize etmek için tüm stil bilgilerini tutmak için tek bir stil sayfası oluşturmak istedim. Aşağıdaki gibi SVG dahil edilirkenbirkaç SVG dosyalarını içeren bir IMG etiketi

Ancak, CSS alışkanlık uygulanmıyor. Herkes buna bir çözüm olması veya <img src="..." /> tarafından başvurulan bir SVG diğer (CSS) dosyaları bağlamak adil değil mümkün mü?

Aşağıdaki örnek kodu inceleyin. Doğrudan tarayıcıda pic.svg yüklerken, tüm stiller uygulanır ve yeşil bir dikdörtgen görülebilir. Ancak page.htm'u açarken görmeniz gereken tek şey siyah bir dikdörtgendir. Açıkça tanımlanan stillerin hiçbiri uygulanmadı.

sayfası.htm

<!DOCTYPE html> 
<html> 
<body> 
    <img src="pic.svg" style="width: 100px; height: 100px;" /> 
</body> 
</html>

pic.svg

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="styles.css" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

styles.css

rect { 
    stroke: black; 
    fill: green; 
}

EDIT

Bir cevaptan, kısa bir süre için burada göründü, this link to the spec ve aşağıdaki alıntı var. Benim düşünceme göre, yukarıdaki kod işe yarayacak! 'Img', 'nesnenin (HTML) veya 'resim'(SVG) bir HTML veya XML belgesine katıştırılmış

Tek başına SVG belgesi elemanları

[...]
"senin bağlantıdan başvurulan SVG belge içinde herhangi bir yerde tanımlanan stil sayfaları gerekçe
tüm SVG belgesi genelinde geçerlidir, ancak (stil öğeleri veya stil niteliklerini veya stil sayfası işleme talimatı ile bağlantılı harici stil sayfalarında olarak) yapma başvuru belgesini (belki HTML veya XHTML) fekte edin. gizlilik için

kaynak

2012-09-25 Sirko

görüntüleri bağımsız dosyalar olmalıdır müzakere eder. Stil sayfasını veri uri olarak kodlarsanız CSS'yi kullanabilirsiniz. Örneğin.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

Veri adresleri için online converters çeşitli vardır.

kaynak

2012-09-25 15:09:37

Ancak bu durumda yine SVG dosyası başına bir stil tanımına sahip olurdum. Ve bu yayınladığım özümle nasıl ilişkili? – Sirko

Stil tanımlarını paylaşmak isterseniz, resim etiketlerini kullanamazsınız. Güvenlik sorunları genellikle böyle şeyleri dikkate almayan şartname gereksinimlerini geçersiz kılma eğilimindedir. –

Görünüşe göre, bu ayrıca bir HTML dosyası aracılığıyla yüklenen SVG dosyalarından harici yazı tiplerine başvuramayacağınız anlamına gelir. –

alternatif başka bir html <object> etiketi kullanmaktır: -

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

O <img> etiketi çalışmaz BÜYÜK utanç. SVG'yi bir veri URI'sına dönüştürmekle uğraşmak istemiyorum. Kaynakların dolaylı olarak yüklenmesi ve "Açık Yeniden Yönlendiricinin" kullanımıyla ilgili siteler arası güvenlik açıkları ile ilgilidir.

lastnight benim test, <img> etiket yöntemi IE10 iş unutmayın, ama ikisi de Krom ne de FireFox.

Neden <object> izin verilir ve <img> değil bilmiyorum. Bir gözetim mi?

kaynak

2013-08-23 09:24:14

Gözden geçirme yok, insanların genel beklentilerinin bir görüntünün yetenekleri ile ilgili olduğu, yani gördüğünüz her seferinde ne olduğudur. Nesne etiketi, her zaman okunabilir karmaşık içerik için izin vermiştir. –

Bu cevabı en iyi şekilde seviyorum, SVG'mde görünmesi için bir font alıyorum bütün gün beni deli ediyor! Teşekkür ederim! ... ancak siz yazdıkça, HTML 'nin geri kalanını kırıp "height =" 100 ">' gibi bir kapanış nesnesi etiketi gerekiyordu. http://scrabblehack.com/ –

Leon: Teşekkürler. Örneğini buna göre güncelledim. –

birkaç SVG dosyalarını içeren bir IMG etiketi

cevap

İlgili konular