SVG：陰影的顏色

我想在SVG中編寫一個帶紅色陰影的簡單矩形。我有一個簡單的過濾器：SVG：陰影的顏色

<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/ ？page = 2 您可以將原始濾鏡圖像與真實圖像疊加，以實現它。我以這種方式使用它。 – Kris

您提供了無效的SVG - 您需要關閉<rect>元素。
您的示例（固定）在Chrome中爲我顯示一個紅色陰影。下面是this URL看起來像我的Chrome V15：

什麼操作系統/瀏覽器/版本是你看到不同的結果有？

編輯：在Firefox v7中，我看到所有灰度，而在Safari v5中我根本看不到陰影效果。您的答案很可能只是您在瀏覽器/版本中進行測試，並且不完全支持SVG過濾器規範。

來源

2011-11-01 21:30:02 Phrogz

Safari在版本6之前不支持過濾器，請參閱http://caniuse.com/#feat=svg-filters。 –

我假設它不會因爲http://www.w3.org/TR/SVG11/filters.html#SourceAlpha而產生紅色。 SourceAlpha - >隱式黑色（＃000）+ alpha。如果用'in =「SourceGraphic」'替換'in =「SourceAlpha」'，它可以在Opera和Chrome中使用。 –

Firefox的問題在於它曾經有一個錯誤，它不會使用單個值處理離散的feFunc。它可以通過使用兩個值來解決，例如。 tableValues =「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

SVG：陰影的顏色

回答

相關問題