1

HTMLでスクロールバーなしでSVGを確実に表示するにはどうすればよいですか？FirefoxとChromeの両方で機能するもので十分です。

  • 最も基本的な手順は、SVGがドキュメント内で「自然な」幅と高さで表示されることです。完全に拡張されました。スクロールバーなし。Firefoxは一般的にこれを行います。Chromeは通常、使用しません（実際の幅と高さに関する事前の知識を使用しない限り）。

  • より高度な手順は、SVGに任意の幅（たとえば400ピクセル）を指定することです。SVGは、アスペクト比を維持しながら適切にスケーリングされて表示されます。繰り返しますが、スクロールバーはありません。

HTML内のSVGの自然な寸法を知る必要はありません。HTMLまたはCSSを変更するのが最善ですが、SVGを変更することもできます（一度、表示したいすべてのサイズに対してではありません）。

このようなことは可能ですか？

これは、svgを埋め込んだhtmlの例です。

<html>
    <head><title>SVG Sizing</title></head>
    <body>
        <embed type="image/svg+xml" src="test.svg">
    </body>
</html>

以下の<embed>タグは、必要に応じて<object>などに変更できます。

test.svgの例を次に示します。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1200px" height="297px" version="1.1" viewbox="0 0 1200 297" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" stroke-width="1" text-rendering="geometricPrecision">
    <text x="300" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> A </text>
    <text x="900" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> B </text>
    <line x1="300" y1="22" x2="300" y2="47" stroke="black"/>
    <line x1="900" y1="22" x2="900" y2="47" stroke="black"/>
    <text x="587" y="37" textLength="25" font-family="Helvetica" font-size="12" fill="black"> Start </text>
    <line x1="300" y1="272" x2="300" y2="297" stroke="black"/>
    <line x1="900" y1="272" x2="900" y2="297" stroke="black"/>
    <text x="583" y="287" textLength="32" font-family="Helvetica" font-size="12" fill="black"> Finish </text>
    <line x1="150" y1="284" x2="582" y2="284" stroke="black" stroke-dasharray="2,2"/>
    <line x1="618" y1="284" x2="1050" y2="284" stroke="black" stroke-dasharray="2,2"/>
</svg>

アップデート：

わかりました。私が使用しているツールは小文字の属性を持つSVGを生成しているようですが、これは正しくありません。Erikが以下に正しく記述しているようviewboxに、属性名は実際にはキャメルケースです。viewBox

これを幅/高さの削除またはパーセンテージへの変更と組み合わせると、質問の両方の部分を達成できます。

みんな、ありがとう！

4

2 に答える 2

2

svgを画面の幅/高さ全体に表示する場合は、htmlドキュメントでこれを試してください。

<style>
html, body { margin:0; padding:0 }
embed { width: 100%; height: 100% }
</style>

ドキュメントのより小さな領域を塗りつぶしたい場合は、参照されているsvgルート要素のwidth属性とheight属性を削除してみて、viewBox属性があることを確認してください。次に、コンテナ（埋め込み）のサイズによってサイズが適切に決定され、スコルバーが存在しないようにする必要があります。

于 2010-07-30T20:38:43.317 に答える
0

試す ：

<svg width="100%" height="100%" ...>

次に、画像はのサイズにサイズ変更されます（むしろ使用する必要があることに注意してください）。

ビューボックス属性が入力されているため、これは機能します。

于 2010-07-29T15:16:14.937 に答える