Что такое определение цвета и цвета освещения в CSS? - PullRequest
Новая
       21

Что такое определение цвета и цвета освещения в CSS?

8 голосов
/ 08 августа 2011

Круто, я только что понял, что в CSS есть нечто, называемое flood-color и lighting-color. Кто-нибудь знает, что такое flood-color и lighting-color и что они делают?

Что именно это значит?

Свойство «заливать» указывает, какой цвет использовать для заливки текущий фильтр примитивного субрегиона. Ключевое слово currentColor и ICC цвета могут быть указаны так же, как в спецификация для свойств «fill» и «stroke».

Свойство «lighting-color» определяет цвет источника света для фильтрующих примитивов "feDiffuseLighting" и "feSpecularLighting".

Как мы применяем эти так называемые SVG эффекты? Я пытался установить красный цвет освещения, но, похоже, никакого эффекта не было.

Ответы [ 2 ]

9 голосов
/ 08 августа 2011

Это эффекты фильтра SVG.

Свойство 'lighting-color' определяет цвет источника света для примитивов фильтров 'feDiffuseLighting' и 'feSpecularLighting'.

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

Свойство 'flood-opacity' определяет значение непрозрачности, которое будет использоваться во всем примитиве фильтра.

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

3 голосов
/ 23 октября 2013

Спецификация была не очень полезна, когда я посмотрел это.
Попробуйте 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>
...