2016-12-17 5 views
5

किसी कारण से, क्रोम अपनी छवि टैग में छवियों के बिना एसवीजी प्रदर्शित कर रहा है।एसवीजी छवि टैग में छवियाँ क्रोम में दिखाई नहीं दे रही हैं, लेकिन स्थानीय रूप से प्रदर्शित होती हैं?

यहाँ मेरी एसवीजी से एक नमूना है:

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

blocker.png स्थानीय फाइल है, लेकिन मैं भी imgur पर अपलोड करने की कोशिश की है, लेकिन है कि या तो काम नहीं किया।

यहाँ svg टैग है:

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

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

यहाँ क्या यह एक लाइव वेबपृष्ठ पर की तरह लग रहा है:

<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"> 

यहाँ यह क्या लग रहा है स्थानीय स्तर पर की तरह है

आप कर सकते हैं के रूप में देखो, दो खिलाड़ी गायब हैं। जब मैं ऑनलाइन एसवीजी अपलोड ऐसा नहीं होता है, लेकिन जब मैं अपने पृष्ठ पर उस URL को लिंक करने के लिए प्रयास करते हैं, एक ही बात

सुनिश्चित नहीं हैं कि क्या होता है अगर यह प्रासंगिक है, लेकिन यहां पृष्ठ के HTML कोड है:

<!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> 
+0

आप परिवर्तनों को प्रतिबिंबित करने '' टैग की राह बदलने के लिए सुनिश्चित कर लें किया? अर्थात।'blocker.png' को 'http: // imgur.com/you/ABCDEF' में बदलें या जो भी लिंक है – Jhecht

+0

@Jhecht हाँ, मैंने सुनिश्चित किया कि मैंने किया है। मैंने इसे स्थानीय रूप से लोड किया, यह दिखाया गया। मेरे वेबपृष्ठ पर लोड किया गया, यह नहीं था। – sgruggy

उत्तर

12

पॉललेबेउ का जवाब सही है। लेकिन एक और समाधान चित्र के लिए img टैग के बजाय embed टैग का उपयोग करना है।

<embed src="svg.svg"> 

Here HTML में svg छवियों को एम्बेड करने के कुछ तरीके हैं।

+0

वाह, महान !!! धन्यवाद :) – kabrice

4

जब आप एक <img> तत्व का उपयोग वेबपृष्ठ में एक एसवीजी लोड, एसवीजी आत्म निहित हो गया है। यह पीएनजी फ़ाइलों से जुड़कर आप तीसरे भाग संसाधनों से लिंक नहीं कर सकते हैं। यह ब्राउज़र द्वारा लगाया गया एक गोपनीयता प्रतिबंध है।

संभव समाधान हैं:

  1. डाटा यूआरआई प्रारूप करने के लिए अपने पीएनजी कन्वर्ट और उन्हें अपने एसवीजी कि रास्ते में शामिल हैं।

  2. अपने अवरोधक पीएनजी को वास्तविक एसवीजी तत्वों जैसे <path> में कनवर्ट करें।

+0

हालांकि यह स्थानीय रूप से क्यों काम करेगा? – sgruggy

+0

यदि यह सत्य था, तो यह तब भी काम नहीं करेगा जब मैं इसे ऑनलाइन छवि होस्टिंग वेबसाइटों पर अपलोड करता हूं, जो उसने किया था। – sgruggy

+1

अपने ब्राउज़र में एसवीजी देखना (यानी '.svg' फ़ाइल) ठीक है, क्योंकि आप इसे' 'के माध्यम से लोड नहीं कर रहे हैं। वही लागू होता है यदि आपकी छवि होस्टिंग साइट होस्ट करती है और '' के माध्यम से इसे एम्बेड करने के बजाय सीधे '.svg' फ़ाइल परोसती है। –

-1

मैं पता लगाने के लिए हुआ है कि क्रोम [v 58.0.3029.81 (64-बिट)] यदि छवि फ़ाइल एचटीएमएल रूट निर्देशिका में स्थित नहीं है svg अंदर छवि प्रदर्शित नहीं करता है। .svg और .png एम्बेडेड फ़ाइलों में रखा गया था/छवियों -folder, .svg सामग्री क्रोम में सही आया था, लेकिन नहीं एम्बेडेड .png। जब .png की प्रतिलिपि बनाई गई थी (../) HTML रूट, क्रोम काम करता है।

हालांकि, Firefox [v 52.0.2 (32-बिट)] ठीक काम करने के लिए जब .svg लगता है और .png ही/छवियों फ़ोल्डर में हैं।

संपादित करें: असल में मेरे मामले में मैं d3.xml (..) js हो रही वास्तविक svg तत्वों को संभाल के लिए विधि के साथ svg लोड।

संबंधित मुद्दे

 संबंधित मुद्दे