IE11中SVG周圍的空白問題，與SVG中的文本有關
[英]Issues with whitespace around SVG in IE11, related to text in the SVG
問題描述
我在Internet Explorer中遇到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>
在IE11中查看此內容會在SVG的右側和下方產生大量空白。 請注意下面屏幕截圖中的滾動條，表示IE中有大量空白空間，但Chrome中沒有。
如果我執行以下任何操作，則空格會消失：
- 刪除viewbox屬性
- 將文本進一步移動到右上角
- 刪除文本（不必刪除文本標簽，只刪除內容）
作為一個實驗，我在SVG下面添加了一個段落，看看空格是否會取代段落。 該段直接出現在SVG下方 - 它沒有被空白所取代。
知道我怎么能解決這個問題，以便不出現空白？
2 個解決方案
解決方案1
2 已采納 2017-07-22 10:11:10
這顯然是IE中的一個錯誤。 一個簡單的解決方法是設置overflow: hidden在SVG上。
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>
解決方案2
0 2017-07-21 19:59:32
如果問題是svg框左側和頂部周圍的空白，請嘗試將主體邊距設置為0
body{
margin: 0;
}
來自文本的SVG圖像剪輯僅在IE11中有效，其他瀏覽器產生各種結果
[英]SVG image clip from text only working in IE11, other browsers yielding various results
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.