4

次のインライン SVG フィルターを HTML5 ドキュメントに挿入する必要があります。

<svg>
    <defs>
        <filter id="grayscale">
            <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0">
        </filter>
    </defs>
</svg>

<html>タグの外に配置しようとしましたが、うまくいきませんでした。配置する場所によっては、表示されたページの最初または最後に大きな空白スペースが残ります。

<head>タグのor の先頭に配置しようとしました<body>が、表示されたドキュメントの先頭にも大きな空白スペースが残ります。

display: none;SVG オブジェクトを設定すると、フィルターが機能しなくなります。

とプロパティをゼロに設定しようと<svg>しましたが、これは svg オブジェクトの CSS を に設定した場合にのみ機能します。widthheightdisplay: block;

例えば：

<!DOCTYPE html>
<html>
    <head>
        ...
        <svg> ... </svg>
    </head>
    ...
</html>

現在、私の一時的な修正は、css を使用して非表示にすることです。

svg {
    height: 0;
    position: absolute;
}

SVG オブジェクトが HTML レイアウトに干渉しないようにするにはどうすればよいですか (この css トリックを使用せずに)。

jsFiddle の例

4

1 に答える 1

2

私はこれが機能するかどうか確信が持てませんが、SVG 要素は幅と高さの属性 (imgタグなど) を許可します。だから試してみてください：svg width="0" height="0"

于 2012-08-13T06:45:20.500 に答える