ビューボックス属性が

Question

を設定するあなたは、幅と高さの属性やビューボックスを持っているthis jsbin SVG画像を見れば属性セット：

var width = width + margin.left + margin.right; 
var height = height + margin.top + margin.bottom; 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr('viewBox', '0 0 ' + width + ' ' + height) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

その後、SVGはまったくスケールしません。

しかし、幅と高さの属性をコメントアウトすると、this binのような縮尺で表示されます。

私はviewBox属性によって非常に混乱しています。幅、高さ、およびviewBox属性がすべて設定されたオンラインの例が多数あります。幅と高さの属性がある場合、viewBox属性が否定されていることがわかります。

実際に実際のスペースに対応するviewBoxの幅と高さのプロパティにも困惑しています。

ドキュメントでは、独自の座標系を指定していると言われていますが、これが意味することと幅と高さがドキュメントの実際の幅と高さにどのように対応しているのか分かりません。

Answer 1

tl;dr:viewBoxはSVG内、widthとheightがそれを表示するには、どのようなサイズで教えていただきました！描画するためです。

viewBoxは、SVGを描画するキャンバスと座標系を定義します。それはviewBox="10 50 100 100"を言うと、あなたは画像の左上四分の一をカバーして四角形を描画したい場合は、書きます：

<svg viewBox="10 50 100 100" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="50" width="50" height="50" /> 
</svg> 

を次に、あなたがSVGを表示する場合、HTMLに埋め込ま例えばページ、幅と高さだけでは、画像タグの場合と同様に、それらを表示するためにどのようなサイズで言う：あなたのSVGを外部ファイルdrawing.svgとして保存されている場合

<div> 
    <svg width="250" height="250" viewBox="10 50 100 100" 
     xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="50" width="50" height="50" /> 
    </svg> 
</div> 

、あなたが

と同じ効果を表現できます

<div> 
    <img src="drawing.svg" width="250" height="250" /> 
</div> 

どちらの場合も、描画した四角形は画像の左上1/4を覆いますが、SVGは250px x 250pxの全体サイズで描画されるため、正方形の辺の長さは125px x 125pxになります。ビューボックスで定義された幅がaであり、素子上に定義された幅がbある言い換えれば

は、効果はb/aの因子とSVG（水平方向）の内側にすべてのスケーリングと同じです。

（明らかビューボックスの高さがcときの要素の高さがdあり、かつ比はd/c ≠ b/aそれはpreserveAspectRatio属性が記述する何ですか？一致していない、何が起こるか疑問を開くこと。）

正式には、すべての組み合わせwidth,height,viewBoxおよびpreserveAspectRatioは、transform属性と同等に記述することができます。このアルゴリズムはhereと記載されています。 （この例で使用されている<svg>要素の場合、xとy属性は常に0でなければなりません。）