SVG'deki görüntüler Resim etiketleri Chrome'da görünmüyor, ancak yerel olarak gösteriliyor mu?

Bazı nedenlerle, Chrome resim içermeyen SVG'yi Resim etiketlerinde görüntülüyor.SVG'deki görüntüler Resim etiketleri Chrome'da görünmüyor, ancak yerel olarak gösteriliyor mu?

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.png yerel bir dosya, ama ben de Imgur yükleyerek çalıştı, ama bu da işe yaramadı: Burada

benim SVG bir örnektir.

http://i.imgur.com/KVuxLI1.png:

İşte http://i.imgur.com/BDP8KpG.png

bir canlı web sayfasında neye benzediği:

İşte

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

yerel olarak neye benzediği: Burada

svg etikettir

Yapabileceğiniz gibi bakın, iki oyuncu eksik. Online SVG yüklerken bu olmaz, ama benim sayfaya bu URL'yi bağlamaya çalışırken, aynı şey alakalı olup olmadığını

emin değil olur ama burada sayfa için HTML kodu:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>SVG</title> 
<style> 
img{ 
    width: 100%; 
    height:auto; 
    max-width: 800px; 
} 
</style> 
</head> 

<body> 

<div> 
    <img src="svg.svg"/> 
</div> 

</body> 
</html>

kaynak

2016-12-17 sgruggy

Değişiklikleri yansıtmak için '' etiketinin yolunu değiştirdiğinizden emin misiniz? Yani'blocker.png'' i 'http: // imgur.com/you/ABCDEF' olarak değiştirin ya da link ne olursa olsun – Jhecht

@Jhecht Evet, yaptım. Yerel olarak yükledim, ortaya çıktı. Web sayfama yüklendi, değil. – sgruggy

PaulLeBeau'nun cevabı doğrudur. Ancak başka bir çözüm, resim için bir img etiketi yerine embed etiketini kullanmaktır.

<embed src="svg.svg">

Here HTML svg görüntüleri gömmek için bazı yolları vardır.

kaynak

2016-12-17 06:15:24 nisekgao

Vay, greatttt !!! Teşekkür ederim :) – kabrice

bir <img> elemanı kullanarak bir web içine SVG yüklemek , SVG kendine yeten olmak zorundadır. PNG dosyalarına bağlayarak yaptığınız gibi üçüncü kısım kaynaklara bağlantı kuramıyor. Bu, tarayıcı tarafından dayatılan bir gizlilik sınırlamasıdır.

Olası çözümler şunlardır:

Veri URI biçimine PNG dönüştürme ve SVG yolu ekleyene.
Bloker PNG (ler) inizi, <path> gibi gerçek SVG öğelerine dönüştürün.

kaynak

2016-12-17 05:49:31

Neden yerel olarak çalışırdı? – sgruggy

Eğer bu doğru olsaydı, bunu çevrimiçi görüntü barındırma web sitelerine yüklediğimde işe yaramazdı. – sgruggy

Tarayıcınızdaki SVG'yi görüntüleme (örn. '.svg' dosyası), '' aracılığıyla yüklemiyorsunuz. Aynı görüntü barındırma sitenize ev sahipliği yapar ve '.' aracılığıyla gömmek yerine doğrudan .svg' dosyasına hizmet verirse geçerlidir. –

-1

Resim dosyası html kök dizininde bulunmuyorsa Chrome [v 58.0.3029.81 (64-bit)] görüntüyü svg içinde göstermediğini öğrendim. .svg ve gömülü .png dosyaları/images -folder içine yerleştirildi, .svg içeriği Chrome'da sağ çıktı, ancak gömülü .png değil. .png, html köküne (../) kopyalandığında Chrome çalışır. Ancak, Firefox [v 52.0.2 (32 bit)] .svg ve .png aynı/images klasöründeyken iyi çalışıyor gibi görünüyor.

Düzenleme: Aslında benim durumumda, svg'yi gerçek svg öğelerine js işlemek için d3.xml (..) yöntemiyle yüklüyorum.

kaynak

2017-04-20 17:42:54 mpeli

SVG'deki görüntüler Resim etiketleri Chrome'da görünmüyor, ancak yerel olarak gösteriliyor mu?

cevap

İlgili konular