2

いくつかのフィルターを定義しようとしていますが、メインの HTML ドキュメントを混乱させたくありません。相対 IRI を使用してこれらのフィルターを参照するために、相対 URI を使用したいと思います。

フィルター.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>

でこれらを提供するとpython -m SimpleHTTPServer、Chrome で 2 つのあいまいな小さなドットが表示されると予想されます。

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

(フィルターを定義に直接貼り付けることで生成されました。これは私が思って<use>いたことです。)

私が得るもの：

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

後で

@Jason Aller が指摘しているように、これは Chrome ではサポートされていません。前述のとおり、私のフィルターは Firefox では機能していないようです。（実際の画像にはいくつかあり、かなり複雑です）を別のファイルに保持するための回避策はありますか？

4

1 に答える 1

1

caniuse.comを見てテストしたところ、Firefox では動作することがわかりましたが、Chrome では動作しませんでした。

于 2014-03-10T20:34:36.693 に答える