एसवीजी रैखिक ढाल सफारी

में काम नहीं करता है मुझे एक एसवीजी ऑब्जेक्ट मिला है जिसमें एक दस्तावेज़ में सीधे एम्बेडेड एक रैखिक ढाल शामिल है। यह क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन सफारी में कुछ भी प्रस्तुत नहीं किया जाता है। अगर मैं एक फ़ाइल के रूप में एसवीजी बनाता हूं और इसे ऑब्जेक्ट टैग का उपयोग करके एम्बेड करता हूं, तो यह सफारी में ठीक काम करता है। अन्य आकार और काम भरता है, यह सिर्फ रैखिक ढाल है जो काम नहीं करता है। मुझे लगता है कि मैं ऑब्जेक्ट का उपयोग कर सकता हूं, लेकिन मैं सीधे एसवीजी को एम्बेड करना पसंद करूंगा।एसवीजी रैखिक ढाल सफारी

मैं यहाँ एक डेमो बनाने (क्रोम, नहीं सफारी में काम करता है) कर दिया है: http://jsfiddle.net/sjKbN/

मैं this answer जो application/xhtml+xml लिए सामग्री प्रकार की स्थापना का सुझाव भर में आया है, लेकिन अपने आप में यह अन्य समस्याओं के कारण लगता है।

बस सोच रहा है कि क्या कोई इस काम को पाने के लिए किसी अन्य फिक्स या विचारों में आया है।

स्रोत

2012-07-03 Christian Varga

ढाल सफारी (डाउनलोड http://nightly.webkit.org/ के लिए उपलब्ध) की रात को वेबकिट बिल्ड संस्करण में काम करता है तो वहाँ एक अच्छा मौका है यह सफारी के भविष्य जारी किया संस्करण में काम करेंगे। –

आह यह बहुत ही बढ़िया है, यह देखकर खुशी हुई कि उन्होंने इसे ठीक कर दिया है। टिप के लिए चीयर्स! –

आपका ढाल सफारी में काम करता है, तो आप इसे चारों ओर एक defs टैग लपेटो जाएगा:

<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="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
<defs> 
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5"> 
    <stop offset="0" style="stop-color:#FFF33B"/> 
    <stop offset="0.0595" style="stop-color:#FFE029"/> 
    <stop offset="0.1303" style="stop-color:#FFD218"/> 
    <stop offset="0.2032" style="stop-color:#FEC90F"/> 
    <stop offset="0.2809" style="stop-color:#FDC70C"/> 
    <stop offset="0.6685" style="stop-color:#F3903F"/> 
    <stop offset="0.8876" style="stop-color:#ED683C"/> 
    <stop offset="1" style="stop-color:#E93E3A"/> 
</linearGradient> 
</defs> 
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/> 
</svg>

ऐसा लगता है कि defs में अपने संदर्भ लपेटकर प्रोत्साहित किया जाता है लेकिन अनिवार्य नहीं according to spec। तो यह सफारी में एक बग है।

स्रोत

2012-07-03 12:04:39 Duopixel

मेरी इच्छा है कि मैं इस उत्तर के लिए और अधिक उत्साह दे सकता हूं, यह सही है। धन्यवाद! –

कम से कम मैं आपकी मदद के बाद कर सकता था! http://stackoverflow.com/a/10808645/524555 – Duopixel

अल्फा के बारे में: ऐसा लगता है कि सफारी (इस पल में 7) एसवीजी रंग अल्फा चैनल को कवर नहीं करती है, स्टॉप अस्पष्टता विशेषता का उपयोग करें। यह बढ़िया काम करता है!

<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work 
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok

स्रोत

2014-10-06 16:43:56 Sebastien

प्रश्न में कोड rgba रंगों का उपयोग नहीं करता है, इसलिए यह इस विशेष प्रश्न का उत्तर नहीं है। –

गलत सर लॉन्गसन! पहले रैखिक ढाल पर दोष की खोज करना जो अन्य ब्राउज़र की तुलना में सफारी में समान काम नहीं करता था, मैंने पहले यह पोस्ट देखा था। दूसरा, विषय रैखिक ढाल के सफारी के विभिन्न व्यवहार से संबंधित है। अल्फा चैनल इस वैश्विक विषय का एक हिस्सा है: "एसवीजी रैखिक ढाल सफारी में काम नहीं करता है" – Sebastien

@ सेबेस्टियन, महान जवाब। यह निश्चित रूप से यहां होना प्रासंगिक है! धन्यवाद – user2070775

उत्तर

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