2011-08-08 5 views
8

Świetnie, po prostu zdałem sobie sprawę, że w CSS jest coś o nazwie flood-color i lighting-color. Czy ktoś wie, co to jest flood-color i lighting-color i co oni robią?Co to jest definicja koloru powodziowego i koloru oświetlenia w CSS?

Co dokładnie oznaczają te ?:

do „flood-color” właściwość wskazuje, jakiego koloru użyć do zalać Aktualny filtr prymitywnego podregion. Kolory słowa kluczowego currentColor i ICC można określić w taki sam sposób, jak w specyfikacji dla właściwości "wypełnienia" i "obrysu".

Właściwość "oświetlenie-kolor" określa kolor źródła światła dla funkcji prymitywów filtrów "feDiffuseLighting" i "feSpecularLighting".

Jak zastosować tak zwane efekty SVG? Próbowałem ustawić kolor oświetlenia na czerwony, ale nie wydaje się, żeby był jakikolwiek efekt.

Odpowiedz

8

To są efekty filtra SVG.

do „oświetlenie-color” Właściwość określa kolor źródła światła dla prymitywów „filtru feDiffuseLighting” i „feSpecularLighting”.

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

do „przeciwpowodziowe krycie” właściwość określa wartość krycia do stosowania w całej cały filtr prymitywny podregionów.

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

+0

one działają jak efektów SVG gradientów tle? lub raczej jak dokładnie to stosujemy? próbowałem ustawić je na różne prawidłowe wartości kolorów, ale żadna z nich nie wykazuje żadnych różnic – Pacerier

3

Spec nie był bardzo pomocny, kiedy spojrzałam tego.
Spróbuj https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

Istnieją trzy style mogą ubiegać się: można użyć maski, Clip-Ścieżka lub filtr.

Jedyny raz, kiedy potrzebowałem tego użyć, to gdy chciałem odwrócić grafikę za pomocą XOR.

Zdefiniuj filtr 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> 

Nanosić CSS:

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