viewBox属性の設定は、ユーザのコーディネートにどのように影響しますか

Question

私は次のコードを持っています：http://jsfiddle.net/fCWJ5/1/、およびビューボックスに関する疑問があります。 = 0.2フィドル一人のユーザから

1. 座標、iは 1000分の200（試験DIV幅/ビューボックス幅属性）を分割することにより得、この。 によれば、長方形は（30px、10px）にあり、幅は 高さは10px、10pxです。しかし、長方形は （30px、97px）にあり、幅と高さは10px、10px（ある程度の高さは と計算によると正しいです）。 のy座標が間違っている理由を指摘してください。
2. 次に、私はpreserveAspectRatio = "xMinYMin meet"と言ったように、 チュートリアルpdfを読んでください。この値は正常に動作していました。しかし、他の 値の場合、ディスプレイはtossになります。これが何であるか説明してください。 I は既に could not able to put viewbox,viewport,userspace together and get the pictureに関する質問があります。 答えとその概念を理解できません。
3. 私は何も指定しなかった場合、比率の値は何か とsvg DOM要素コンテナの高さを指定します。
4. 私は1.3（viewBoxの高さのdiv/height の高さ）の比率が使用されていないことを確認しています。高さ、y座標のようなものを計算するのに のために使用されるべきです。

Answer 1

問題は、あなたのDIVのアスペクト比がviewBoxのアスペクト比と一致しないことです。したがって、HTMLはSVGをDIVの中央に空のスペースを上下に置きます。説明するために、あなたのSVGコードに次の行を追加します。あなたはDIVの上に置く赤い枠はあなたにその境界線が表示されますながら

<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/> 

これは、あなたのSVG要素の境界線が表示されます。彼らは一致しません。

SVG要素に幅や高さを指定しない場合は、そのコンテナが塗りつぶされます。あなたの例では、DIVを200px X 200pxに設定すると、ビューボックスは200pxを1000ユーザー単位でXに、30pxを150で効果的に適用します（SVGのアスペクト比がDIVのわずか15％高さはSVGによって使用され、200ピクセルの15％は30ピクセルです）。 DIVから幅と高さを削除すると、画面の全幅が使用されます。

rect要素を追加すると、ボックスが上から1/3（50/150 = 1/3）下に1/3下がり、3/20（150/1000 = 3）になります/ 20）を、左から1/20（50/1000 = 1/20）だけ広げる。