Question

我正在努力使用svg模糊Google Chrome 36.0.1985.125 linux上的文字背景。 svg就像

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

小提琴：http://jsfiddle.net/2o2trpc1/

因此，我想模糊“文本”背后的“背景”，但“文本”根本没有出现。有人可以看看我做错了什么吗？我在哪里可以检查浏览器版本是否支持过滤背景图像？

非常感谢，巴拉兹

Answer 1

你必须解决缺乏BackgroundImage的问题。有多种方法可以做到这一点，如果你的代码像你发布的这样的小提琴一样简单就可以了：

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

请参阅fiddle。

另一种选择是在过滤器中使用<feImage xlink:href="#background"/>，而不是使用BackgroundImage。这可以带来你想要的任何元素。

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

请参阅fiddle。

svg：过滤背景图片，google chrome

1 个答案: