IE11でSVGの周囲の空白に関する問題、SVGのテキストに関連する

インターネットエクスプローラでSVGを囲む大量の空白に問題があります。 IE11でこれを見るIE11でSVGの周囲の空白に関する問題、SVGのテキストに関連する

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<style> 
 
svg { 
 
    border: 1px solid red; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<svg width="600" height="600" viewbox="0 0 600 600"> 
 
    <rect fill="powderblue" x="0" y="0" width="600" height="600"/> 
 
    <text x="500" y="500">test</text> 
 
</svg> 
 
</body> 
 

 
</html>

SVG右下に大量の空白を生成します。私は、私はそれが問題を再現することができ、最も簡単な例を作成しました。下のスクリーンショットのスクロールバーに注意してください。これは、IEでは大量の空き領域が表示されますが、Chromeでは空ではありません。

私は、次のいずれかを行う場合は空白文字が消える：

ビューボックス属性
にさらにテキストを移動
削除

実験として、SVGの下の段落を追加して、空白が彼は段落。パラグラフはSVGの真下に現れました - それは空白に置き換えられませんでした。

これを修正して空白が表示されないようにするにはどうすればよいですか？問題は、SVGボックスの左と上の周りの空白がある場合

出典

2017-06-29 William

IE 11のディスプレイだけで何他のブラウザ希望：500pxなど/ 500pxなどに位置したテキストで600PX 600PXによってpowderblue広場。特別な問題はありません。あなたは何を達成したいのですか？ – ccprog

あなたの考えが間違っているとはっきりしません。 'viewbox'（これは' viewBox' BTWでなければなりません）を削除しても、ここでは何も変わりません。おそらく、間違っていると思われることを示すスクリーンショットを投稿してください。 –

Windows 11 Proバージョン1607ではIE 11.187.14393でエフェクトを再現できません。一方、svg名前空間 'xmlns =" http：// wwwを指定しない限り、ブラウザはSVGをまったく表示しません.w3.org/2000/svg "' – ccprog

に身体のマージンを設定してみてください。 1つの簡単な回避策は、SVGにoverflow: hiddenを設定することです。

svg { 
 
    overflow:hidden; 
 
}

<svg width="600" height="600" viewbox="0 0 600 600"> 
 
    <rect fill="powderblue" x="0" y="0" width="600" height="600"/> 
 
    <text x="500" y="500">test</text> 
 
</svg>

出典

2017-07-22 10:11:10

、それは明らかにIEのバグです0

body{ 
    margin: 0; 
}

出典

2017-07-21 19:59:32 Carla

IE11でSVGの周囲の空白に関する問題、SVGのテキストに関連する

答えて

関連する問題