2011-08-08 47 views
8

酷酷,我剛剛意識到在CSS中有一種叫flood-colorlighting-color的東西。有誰知道flood-colorlighting-color是什麼,他們做什麼?什麼是CSS中的泛光顏色和燈光顏色定義?

究竟做這些的意思是?:

的「洪水色」屬性指示要使用什麼顏色充斥 當前過濾原始分區。關鍵字currentColor和ICC 顏色可以用與'fill'和'stroke'屬性的 規範中相同的方式指定。

「照明顏色」屬性定義濾鏡基元「feDiffuseLighting」和「feSpecularLighting」的光源 的顏色。

我們該如何應用這些所謂的SVG的影響?我已經嘗試將照明顏色設置爲紅色,但似乎沒有任何影響。

回答

8

這些是SVG濾鏡效果。

在「照明色」屬性定義光源 的用於過濾原語「feDiffuseLighting」和「feSpecularLighting」的顏色。

http://www.w3.org/TR/SVG/filters.html#LightingColorProperty

在「洪水不透明度」屬性定義跨越 整個過濾器原語子區域使用不透明度值。

http://www.w3.org/TR/SVG/filters.html#FloodColorProperty

+0

做自己喜歡的背景漸變的SVG影響工作?或者更確切地說,我們如何應用它?我試着將它們設置爲不同的有效顏色值,但沒有一個顯示任何形式的差異 – Pacerier

3

該規範是不是很有益的,當我看到這件事。
嘗試https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

有你可以申請三種風格:你可以使用面膜,夾路徑,或過濾器。

我唯一需要使用它的時候是我想用XOR反轉圖形。

定義SVG濾鏡:

<svg> 
    <filter id="xor" x="0" y="0" width="100%" height="100%"> 
     <feFlood flood-color="#ff1493" result="flood"/> 
     <feComposite operator="xor" in="SourceAlpha" in2="flood"/> 
    </filter> 
</svg> 

應用使用CSS:

<style> 
    .stylename{ 
     mask: url(#xor); 
    } 
</style>