SVG要素は任意の高さを持っているようです

私は実際にいくつかのSVGを学ぼうとしています。しかし、ブラウザは、それをレンダリングする右の古い混乱に乗っているようだ。これは現代の任意のブラウザであり、あなたが長方形と次のHTML段落の間の空白の任意の量が表示されますSVG要素は任意の高さを持っているようです

<html> 
    <head></head> 
    <body> 
    <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> 
     <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
    </svg> 
    <p>Hello? Hellooooooooooooo?</p> 
    </body> 
</html>

ビュー：

は、次のHTMLを取ります。（IE9には何も表示されませんが、それについては誰も驚かないでしょう）

Firefox（Firebug）は、svgまたはrect要素の高さを表示しません。それは単に叫び、「オート」と言う。

オペラはsvgの高さが150pxで、rectの場合は「自動」と言います。

クロムは上手くいって、両方に高みを出します。 rect（明らかにストロークを含む）では102ピクセル、svgでは428ピクセルです。

svg要素は「薄い」コンテナ（つまりコンテンツのサイズに何も追加しない）なので、高さは102pxです。

誰でも正しい動作がどのようなものであるべきか、これを修正する方法について知っていますか？

出典

2012-01-01 David

downvoterは自分自身を説明できますか？ – David

ああ。 2 downvotes。説明や提案はありません。トロール？ – David

SVGの幅や高さ、矩形の配置場所、SVGのどの部分に関心があるのかを明示的に定義していません。ブラウザが物事を別の方法で扱うことはほとんど驚くことではありません。

は、幅と高さを定義してみてください：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

あるいは、定義viewBox：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102 102"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

または両方：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 52 52" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Here are some examples in action。

出典

2012-01-01 23:35:04 robertc

ありがとうrobertc。だから、 'svg'要素の中で、幅と高さを与えるために、図面の寸法を自分で計算しなければなりませんか？私はそれが内容の周りで、それは 'div 'のように大きさをとると仮定しました。 – David

途中でjsfiddleリンクをありがとう。これは典型的な有益な答えです。 – David

@David 'contents'は無限の平面なので、コンテンツの周りにはサイズはありません。 – robertc

SVG要素は任意の高さを持っているようです

答えて

関連する問題