1

メインの html ファイルとは別のファイルとして保存したい SVG 画像があります。埋め込みタグとして機能させようとしていますが、別のビュー ボックスの動作に問題があります。以下は、私が望むように機能するコードです。ビューボックスは、ウィンドウからはみ出さずにできるだけ多くのスペースを占有します

<!DOCTYPE html>


<body style="overflow:hidden; margin:0" bgcolor="#E6E6FA">

    <div>
         <!-- <embed src="example.svg" type="image/svg+xml" /> -->
        <svg 
            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            xmlns:cc="http://creativecommons.org/ns#"
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            viewBox="0 0 400 600">

            <g stroke-width="2">
                <rect height="600" width="400" stroke="#FF0" y="0" x="0" fill="#808080"/>
                <rect height="80" width="100" stroke="#808080" y="80" x="40" fill="#F60"/>
                <rect height="120" width="160" stroke="#808080" y="250" x="160" fill="#FC0" onclick="alert('one')"/>
            </g>
        </svg>
    </div>

</body>

これを、まったく同じテキストを参照する埋め込みタグに置き換えると。ビューボックスは、ウィンドウの垂直寸法をオーバーフローするように幅を埋めます。

4

1 に答える 1

0

私は答えを導き出しました。幅属性からスタイル属性で幅を設定するように移動することで、問題は解決されます。html ファイルには、スタイルが設定された幅の div と埋め込みが含まれています。

<body style="overflow:none; margin:0" bgcolor="#E6E6FA">
    <div style="height:100%">
        <embed src="example.svg" type="image/svg+xml" style="height:100%;width:100%"/>
    </div>
</body>

SVGファイルにはビューボックスが含まれています

<svg 
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 400 600">

<g stroke-width="2">
    <rect height="600" width="400" stroke="#FF0" y="0" x="0" fill="#808080"/>
    <rect height="80" width="100" stroke="#808080" y="80" x="40" fill="#F60"/>
    <rect height="120" width="160" stroke="#808080" y="250" x="160" fill="#FC0" onclick="alert('one')"/>
</g>

ウィンドウを縮小するときにまだいくつかの奇妙な動作があります（幅が高さで変更された場合にのみ適切にサイズ変更されます）。誰かがより良い答えを持っているなら、私はそれを聞きたいです

于 2013-06-26T09:32:55.693 に答える