Как применить фильтр feTurbulence для фигуры - например, Круг в SVG - PullRequest
Новая
       17

Как применить фильтр feTurbulence для фигуры - например, Круг в SVG

5 голосов
/ 25 января 2012

У меня есть следующий код SVG: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%">
<defs>
    <radialGradient id="star_grad">
        <stop offset="0%" style="stop-color: #faf589;"/>
        <stop offset="50%" style="stop-color: #fbf300;"/>
        <stop offset="100%" style="stop-color: #fbbc00;"/>
    </radialGradient>

    <filter id="star_filter">
        <feTurbulence baseFrequency=".04" result="ripples" />
        <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="ripples" />
        </feMerge>
    </filter>
</defs>

<circle cx="50%" cy="50%" r="25%" style="fill: url(#star_grad); filter: url(#star_filter);" />

И я получаю большую часть того, что хочу, но по какой-то причине не могу понять, как применить фильтр только к кругу - он всегда применяет его к ограничивающей рамке плюс 10%. Я мог бы прибегнуть к отсечению, но предпочел бы научиться применять фильтры только к тем фигурам, на которые я хочу воздействовать ...

ПРИМЕЧАНИЕ: не нужно объединять, я пробовал составные, но мне тоже не повезло - я просто хочу наиболее эффективный способ применить фильтр к фигуре без обрезки - если это возможно.

Ответы [ 2 ]

6 голосов
/ 12 марта 2013

Вы хотите использовать feComposite "in" для этого. 

<filter id="star_filter">
    <feTurbulence baseFrequency=".04" result="ripples" />
    <feComposite operator="in" in="ripples" in2="SourceGraphic"/>
</filter>
2 голосов
/ 25 января 2012

Из спецификаций SVG «Область эффектов фильтра» :

Часто необходимо предусмотреть пространство для заполнения, поскольку эффект фильтра может слегка воздействовать на биты за пределами плотно прилегающей ограничительной рамки на данном объекте. Для этих целей можно предоставить отрицательные процентные значения для «x» и «y», а процентные значения больше 100% для «width» и «height». Именно поэтому, например, значения по умолчанию для области эффектов фильтра: x = "- 10%" y = "- 10%" width = "120%" height = "120%" .

Поскольку вы не указали значения области эффектов фильтра, используются значения по умолчанию, как описано выше. Вы должны предоставить свой собственный x="0" y="0" width="100%" height="100%".

Например: http://jsfiddle.net/srnPH/

...