2012-09-25 9 views
14

मेरे पास एक पृष्ठ है, जिसमें कई एसवीजी फाइलें शामिल हैं। उन एसवीजी फाइलों की स्टाइल को सिंक्रनाइज़ करने के लिए मैं सभी स्टाइलिंग जानकारी रखने के लिए एक स्टाइलशीट बनाना चाहता था।किसी आईएमजी टैग द्वारा एम्बेडेड एसवीजी में सीएसएस से लिंक करना

हालांकि, जब नीचे की तरह एसवीजी समेत, सीएसएस लागू नहीं होगा। किसी के पास इसका समाधान है या क्या <img src="..." /> द्वारा संदर्भित एसवीजी में अन्य (सीएसएस) फ़ाइलों से लिंक करना संभव नहीं है?

नीचे उदाहरण कोड देखें। सीधे ब्राउज़र में pic.svg लोड करते समय, सभी शैलियों को लागू किया जाता है और कोई एक हरा आयताकार देख सकता है। लेकिन page.htm खोलते समय सभी को एक काले आयताकार देखना है। तो जाहिर है कि परिभाषित शैलियों में से कोई भी लागू नहीं किया गया था।

page.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

एक उत्तर से, कि थोड़े समय के लिए यहां दिखाई दिया, मुझे this link to the spec और निम्नलिखित उद्धरण मिला। मेरी राय में यह कहा गया है कि उपर्युक्त कोड काम करना चाहिए!

स्टैंड-अलोन एसवीजी दस्तावेज़ 'img', 'वस्तु' (एचटीएमएल) या 'छवि' (SVG) वाला कोई HTML या XML दस्तावेज़ में एम्बेडेड तत्वों

[...]

"आपके लिंक से हवाला देते हुए संदर्भित एसवीजी दस्तावेज़ के भीतर कहीं भी परिभाषित शैली पत्रक पूरे एसवीजी दस्तावेज़ पर लागू हो जाएंगी, लेकिन (शैली तत्वों या शैली में विशेषताओं, या शैली पत्रक प्रोसेसिंग निर्देश के साथ जुड़ा हुआ बाहरी स्टाइल शीट में में) ऐसा नहीं एक रेफरेंसिंग दस्तावेज़ (शायद एचटीएमएल या एक्सएचटीएमएल) को दोष दें। "

उत्तर

10

गोपनीयता कारणों से छवियां स्टैंडअलोन फाइलें होनी चाहिए। यदि आप स्टाइलशीट को डेटा यूरी के रूप में एन्कोड करते हैं तो आप सीएसएस का उपयोग कर सकते हैं। जैसे

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

डेटा यूआरआई के लिए विभिन्न online converters हैं।

+0

लेकिन उस स्थिति में मुझे फिर से एक एसवीजी फ़ाइल प्रति शैली परिभाषा होगी। और यह मेरे द्वारा पोस्ट किए गए स्पेस निकालने से कैसे संबंधित है? – Sirko

+0

यदि आप स्टाइल परिभाषा साझा करना चाहते हैं तो आप छवि टैग का उपयोग नहीं कर सकते हैं। सुरक्षा मुद्दे विनिर्देश आवश्यकताओं को ओवरराइड करते हैं जो आमतौर पर ऐसी चीजों पर विचार नहीं करते हैं। –

+0

जाहिर है, इसका मतलब यह भी है कि आप HTML फ़ाइल के माध्यम से लोड की गई एसवीजी फ़ाइलों से बाहरी फ़ॉन्ट्स का संदर्भ नहीं दे सकते हैं। –

15

एक वैकल्पिक अपने html में <object> टैग का उपयोग करने के लिए है: -

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

यह एक बड़ी शर्म की बात है <img> टैग काम नहीं करेगा है। मैं एसवीजी को डेटा यूआरआई में परिवर्तित करने के साथ हैकिंग के बारे में गड़बड़ नहीं करना चाहता हूं। अप्रत्यक्ष रूप से संसाधनों को लोड करने और "ओपन रीडायरेक्टर" के उपयोग पर क्रॉस-साइट भेद्यता के साथ ऐसा करना है।

ध्यान दें कि पिछली रात मेरे परीक्षण में, <img> टैग विधि IE10 में काम करती है, लेकिन न तो क्रोम और न ही फ़ायरफ़ॉक्स।

मुझे नहीं पता कि क्यों <object> की अनुमति है और <img> नहीं है। निगरानी?

+2

कोई निरीक्षण नहीं, यह इस बारे में है कि लोगों की सामान्य अपेक्षा किसी छवि की क्षमताओं का है यानी आप जो देखते हैं वह हर बार होता है। ऑब्जेक्ट टैग को हमेशा स्क्रिप्ट योग्य जटिल सामग्री के लिए अनुमति दी गई है। –

+1

मुझे यह जवाब सबसे अच्छा लगता है, मेरे एसवीजी में दिखाने के लिए एक फ़ॉन्ट प्राप्त करना मुझे पूरे दिन पागल कर रहा है! धन्यवाद! ... हालांकि जब आपने इसे लिखा था, तब तक मैंने अपने बाकी HTML को तब तक तोड़ दिया जब तक कि मैंने इसे 'ऊंचाई = "100">' बंद कर दिया, किसी कारण से एक बंद ऑब्जेक्ट टैग की आवश्यकता है: http://scrabblehack.com/ –

+0

लियोन: धन्यवाद। मैंने तदनुसार उदाहरण अपडेट किया है। –

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