svg使用另一个文件的过滤器

时间:2014-03-10 19:50:27

标签: xml svg xlink

我正在尝试定义多个过滤器,但不希望它们混乱主HTML文档。我想使用相对URI来引用那些使用相对IRI的过滤器which the docs indicate should work

filters.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
    </defs>
</svg>

page.html中

<!DOCTYPE html>
<html>
<head>
    <meta chartype="utf-8" />
    <title>Remote Filter Loading</title>
</head>
<body>
    <svg
        id="blurs"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
    >
        <defs>
            <use xlink:href="filters.svg#blur"></use>
        </defs>

        <circle cx="50" cy="50" fill="red" r="25"
            filter="url(filters.svg#blur)"
        />

        <circle cx="100" cy="50" fill="red" r="25"
            filter="url(#blur)"
        />
    </svg>
</body>
</html>

在Chrome中使用python -m SimpleHTTPServer投放这些内容时,我希望看到两个模糊的小点:

http://imgur.com/G8AN9bx,aDlhF4g#1

(通过将过滤器直接粘贴到defs中生成,我认为是<use>。)

我得到了什么:

http://imgur.com/G8AN9bx,aDlhF4g#0

后来

正如@Jason Aller所指出的,Chrome不支持此功能。正如我所提到的,我的过滤器似乎不适用于Firefox。有没有可能的解决办法让(实际图像有几个,而且它们相当复杂)在一个单独的文件中?

1 个答案:

答案 0 :(得分:1)

在查看caniuse.com并进行测试后,我发现它可以在Firefox中运行,但不适用于Chrome。