Добавить фильтр в обрезанный элемент в svg (объединить clipPath и элементы фильтра) - PullRequest
Новая
       0

Добавить фильтр в обрезанный элемент в svg (объединить clipPath и элементы фильтра)

3 голосов
/ 16 сентября 2011

Интересно, можно ли применить фильтр svg к обрезанному html-контенту?У всех демонстраций, которые я нашел, есть обрезка и фильтрация отдельно.

Вот пример: http://jsfiddle.net/B7593/1/. Я хочу, чтобы желтый круг отбрасывал тень.

Попытка добавления filter=url('#dropshadow') / style='filter:url(#dropshadow)' до circle / clipPath / div элементов, но ни один из них не сработал.

1 Ответ

5 голосов
/ 16 сентября 2011

Я не думаю, что вы можете сделать это так, как вы к нему подходите - даже если бы вы могли сделать тень частью клипа, вы не увидите ее, когда примените клип, потому что ни один из цветов сохраняется, только непрозрачность пикселей используется для определения того, что видно через. Что будет работать (по крайней мере в Firefox), это применить клип и фильтр к контенту в SVG следующим образом: 

<g filter="url(#dropshadow)">
    <foreignObject width="300" height="300" clip-path="url(#c1)">
        <body>
            <div id="target"></div>
        </body>
    </foreignObject>
</g>

Вот полный пример .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...