CODEWITHSUNDEEP
svgfilter
torel
torel

Reputation: 93

svg: filtering background image, google chrome

I am struggling with an svg to blur background under text on Google Chrome 36.0.1985.125 linux. The svg is like

<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="myfilter" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
            <feGaussianBlur result="blurOut" in="BackgroundImage" stdDeviation="2" />
            <feBlend in2="blurOut" in="SourceGraphic" mode="normal" />
        </filter>
    </defs>
    <g enable-background="new">
        <text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
        <text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
    </g>
</svg>

Fiddle: http://jsfiddle.net/2o2trpc1/

Thus I would like to blur "BACKGROUND" behind "text", but "text" does not appear at all. Can someone please look at this what I am doing wrong? Where can I check that the browser version supports filtering background image?

thanks a lot, Balazs

Upvotes: 2

Views: 943

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 61006

You will have to work around the lack of BackgroundImage. There are multiple ways to do that, if your code is as simple as the fiddle you posted something like this could work:

<body>
    <svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <filter id="blur" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
                <feGaussianBlur result="blurOut" stdDeviation="2" />
            </filter>
        </defs>
        <g>
            <text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24" filter="url(#blur)">BACKGROUND</text>
            <text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26">text</text>
        </g>
    </svg>
</body>

See fiddle.

Another option is to use <feImage xlink:href="#background"/> in the filter, instead of using BackgroundImage. This can bring in whatever element you want.

<body>
    <svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <filter id="myfilter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
                <feImage xlink:href="#background"/>
                <feGaussianBlur stdDeviation="3" />
                <feBlend in="SourceGraphic" mode="normal" />
            </filter>
            <text id="background" x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24">BACKGROUND</text>
        </defs>
        <g>
            <text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26" filter="url(#myfilter)">text</text>
        </g>
    </svg>
</body>

See fiddle.

Upvotes: 2

Related Questions