web-dev-qa-db-ja.com

<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>

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

viewBox="0 0 widthOfContainer heightOfContainer"

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

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

<rect>などの要素やその他の要素の幅と高さをパーセントで定義する必要がある場合、Inkscapeで<svg>ドキュメントを持つすべての要素がパーセント幅を使用するように設定する方法はありますか、高さなど。固定寸法ではなく？

csshtml5svgresponsive-design
105
user782860

viewBoxはコンテナの高さではなく、図面のサイズです。 viewBoxを幅100ユニットに定義し、rectを10ユニットに定義します。その後、SVGをどのように拡大しても、rectは画像の幅の10％になります。

51
robertc

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

そして、私はそれをdivに入れて、それに応じてdivを埋めるようにしたいと思います。私のやり方は次のとおりです。

まず、inkscapeなどのアプリケーションでSVGファイルを開きます。 [ファイル]-> [ドキュメントプロパティ]で、ドキュメントの幅を800pxに、高さを600pxに設定します（他のサイズを選択できます）。次に、SVGをこのドキュメントに適合させます。

pic2

次に、このファイルを新しい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の幅と高さは、inkscapeのドキュメントの幅と高さと同じで、800px Xです。 600px。次に行う必要があるのは、preserveAspectRatioを「none」に設定することです。この属性に関する詳細情報が必要な場合は、こちらが適切です link 。そして、それだけです。

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

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

それが役に立てば幸い！

22
Reza Baradaran Gazorisangi

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

4
Geoff Colbath

@robertcには正しくありますが、svg, #containerがsvgを100％以外に対して指数関数的にスケーリングすることに注意する必要があります（#containerに対して1回、svgに対して1回）。

言い換えると、両方の要素に50％h/wを適用すると、実際には50％の50％、つまり.5、つまり.5、つまり.5、つまり25％のスケールになります。

@robertcが示唆するように使用される場合、1つのセレクターは正常に動作します。

svg {
  width:50%;
  height:50%;
}
2
Justin Putney

あなたのiphoneの場合、あなたの頭の中で使用できます：

"width=device-width"
1
vincent