svg：过滤背景图像，谷歌浏览器_Svg_Filter

svg：过滤背景图像，谷歌浏览器

svg filter

svg：过滤背景图像，谷歌浏览器,svg,filter,Svg,Filter,在Google Chrome 36.0.1985.125 linux上，我正在努力使用svg来模糊文本下的背景。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="object

在Google Chrome 36.0.1985.125 linux上，我正在努力使用svg来模糊文本下的背景。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>


背景
文本

小提琴：

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

非常感谢，

Balazs

您必须解决缺少背景图像的问题。有多种方法可以做到这一点，如果您的代码像您发布的小提琴一样简单，那么类似这样的东西可能会起作用：

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

请参阅。

我的目标是Google Chrometh这与

背景图像

过滤器输入在Blink（Chrome/Opera）中尚未实现基本相同。Thx Erik。当然，如果知道的话，我可以通过清晰地模糊背景对象来解决这个问题。但我想实现的是，无论是过滤器还是前景对象都不知道背景中的实际内容。据我所知，这是背景图片中的重点。此外，只有文本边界框覆盖的部分应该模糊，而不是整个背景对象。它似乎还没有实现-我接受这一点，它将做一些不同的事情，具有类似的效果，例如，放置一个完全白色的矩形，不透明度=0.6，请参见

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