एसवीजी: छाया का रंग

मैं एसवीजी में एक लाल छाया के साथ एक साधारण आयताकार लिखना चाहता हूं।एसवीजी: छाया का रंग

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400"> 
    <title>svg arrow with dropshadow</title> 
    <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc> 
    <defs> 
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> 
    <feComponentTransfer in="SourceAlpha"> 
     <feFuncR type="discrete" tableValues="1"/> 
     <feFuncG type="discrete" tableValues="0"/> 
     <feFuncB type="discrete" tableValues="0"/> 
    </feComponentTransfer> 
    <feGaussianBlur stdDeviation="2"/> 
    <feOffset dx="0" dy="0" result="shadow"/> 
    <feComposite in="SourceGraphic" in2="shadow" operator="over"/> 
    </filter> 
    </defs> 
    <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)"> 
</svg>

क्यों इस उदाहरण छाया लाल रंग में नहीं है: मैं एक साधारण फिल्टर है? मेरा बुरा कहाँ है?

स्रोत

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ? पृष्ठ = 2 आप वास्तविक छवि के साथ आदिम फ़िल्टर छवि को ओवरले कर सकते हैं, इसे स्वीकार करने के लिए। मैंने इसे इस तरह इस्तेमाल किया। – Kris

आपने अवैध एसवीजी प्रदान की है - आप अपने <rect> तत्व को बंद करने की जरूरत है।
आपका उदाहरण (निश्चित) क्रोम में मेरे लिए एक लाल छाया दिखाता है। यहां बताया गया है this URL क्रोम v15 के साथ मेरे लिए की तरह लग रहा है:

क्या ओएस/ब्राउज़र/संस्करण आप के साथ अलग-अलग परिणाम देख रहे हैं?

संपादित करें: फ़ायरफ़ॉक्स v7 में मैं सभी ग्रेस्केल देखता हूं, और सफारी v5 में मुझे छाया प्रभाव दिखाई नहीं देता है। आपका जवाब, सबसे अधिक संभावना है, बस यह है कि आप एक ब्राउज़र/संस्करण में परीक्षण कर रहे हैं जिसमें एसवीजी फ़िल्टर विनिर्देश के अधूरे समर्थन के साथ।

स्रोत

2011-11-01 21:30:02 Phrogz

सफारी संस्करण 6 तक फ़िल्टर का समर्थन नहीं करता है, http://caniuse.com/#feat=svg-filters देखें। –

मुझे लगता है कि यह http://www.w3.org/TR/SVG11/filters.html#SourceAlpha के कारण लाल उत्पादन नहीं करता है। SourceAlpha -> अंतर्निहित काला रंग (# 000) + अल्फा। यह ओपेरा और क्रोम में काम करता है यदि आप 'in =" SourceAlpha "' '=" SourceGraphic "' के साथ 'इन =' स्रोत एल्फा '' को प्रतिस्थापित करते हैं। –

फ़ायरफ़ॉक्स के साथ समस्या यह है कि इसमें एक बग होता था जहां यह एक अलग मूल्य के साथ एक अलग feFunc को संसाधित नहीं करेगा। इसे दो मानों का उपयोग करके चारों ओर काम किया जा सकता है। टेबल वैल्यू = "1 1"। यह लगभग 18 महीने पहले तय किया गया था। –

एक सामान्य समाधान की तलाश में उन लोगों के लिए, यह एक तत्व के अंदर मेरे लिए काम किया:

<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/> 
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/> 
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/> 
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>

स्रोत

2014-09-12 23:25:21

मुझे इस feflood और fecomposite के साथ सुंदर परिणाम मिलता है – crapthings

एसवीजी: छाया का रंग

उत्तर

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