<svg>要素を親コンテナに拡張または縮小するにはどうすればよいですか？

目標は、<svg>要素がその親コン​​テナのサイズに拡張さ<div>れることです。この場合は、コンテナの大きさに関係なく、です。

コード：

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

この問題の最も一般的な解決策viewBoxは、<svg>要素の属性を設定することです。

viewBox="0 0 widthOfContainer heightOfContainer"

ただし、これは、要素内の<svg>要素に事前定義された幅や高さがある場合は機能しないようです。たとえば<rect>、上のコードの要素には、幅と高さが明示的に設定されています。

したがって、明らかな解決策は、これらの要素にも幅と高さを使用することです。しかし、これは実行する必要があるのでしょうか？特に、高さや幅<img src=test.svg >を明示的に設定しても問題なく機能し、問題なく拡張/縮小し<rect>ます。

のような要素<rect>とそのような他の要素の幅と高さをパーセンテージで定義する必要がある場合、Inkscapeでそれを設定して、<svg>ドキュメントのすべての要素が固定サイズの代わりにパーセンテージの幅、高さなどを使用するようにする方法があります。 ？

これviewBoxはコンテナの高さではなく、図面のサイズです。あなたの定義viewBoxあなたを定義し、その後、幅になるように100単位をrect10個の単位であることを。その後、SVGをどれだけ大きくしてrectも、画像の幅の10％になります。

次のようなSVGがあるとします。

そして、私はそれをdivに入れて、応答的にdivを満たすようにしたいと思います。私のやり方は次のとおりです：

まず、SscapeのようなアプリケーションでSVGファイルを開きます。File-> Document Propertiesで、ドキュメントの幅を800pxに、高さを600pxに設定します（他のサイズを選択できます）。次に、SVGをこのドキュメントに適合させます。

次に、このファイルを新しいSVGファイルとして保存し、このファイルからパスデータを取得します。HTMLで、魔法を行うコードは次のとおりです。

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

SVGの幅と高さは両方とも100％に設定されていることに注意してください。これは、コンテナーを垂直方向と水平方向に埋めるためですが、viewBoxの幅と高さは、インクスケープ内のドキュメントの幅と高さ（800px X）と同じです。 600px。次に、preserveAspectRatioを "none"に設定する必要があります。この属性に関する詳細情報が必要な場合は、こちらのリンクをクリックしてください。これですべてです。

もう1つは、このコードが古いブラウザーを含むほとんどすべての主要ブラウザーで機能することですが、androidとiosの一部のバージョンでは、一貫性を保つためにjavascrip / jQueryコードを使用する必要があります。私はドキュメントの準備とリサイズ機能で以下を使用します：

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

それが役に立てば幸い！

私にとって最近うまくいったのは、タグとすべての子タグからすべてheight=""とwidth=""属性を削除すること<svg>です。次に、親コンテナの高さまたは幅の割合を使用してスケーリングを使用できます。

@robertcは、右のそれを持っていますが、あなたはまた、通知に必要なsvg, #containerSVGは何のために指数関数的に拡大縮小されますが、100％（のために一度#containerとのために一度svg）。

つまり、両方の要素に50％h / wを適用した場合、実際には50％の50％、つまり.5 * .5であり、これは.25、つまり25％スケールに相当します。

@robertcが示すように使用すると、1つのセレクターが正常に機能します。

svg {
  width:50%;
  height:50%;
}

あなたのiPhoneのためにあなたはあなたの頭のbaliseで使用することができます：

"width=device-width"