SVG不能設置的寬度和高度在Firefox

我正在捆紮來解決這個問題，這是非常煩人....SVG不能設置的寬度和高度在Firefox

一個結構簡單的HTML，用具有700像素的寬度和高度的SVG元素：

<div id="wrapper"> 
    <div id="gameZone"> 
     <div id="background"> 
     <svg id="svgRoot" width="700px" height="700px"> 
      <circle cx="355" cy="600" r="10" id="ball" /> 
      <rect id="pad" height="15px" width="150px" x="280" y="670" rx="10" ry="20"/> 
     </svg> 
     </div> 
    </div> 
</div>

問題是爲什麼地獄svg顯示沒有寬度和高度在Firefox中？鉻和它的工作100％的 ;

請幫我解決這個問題。

這裏是問題的一個截圖：）http://shaharmesh.hostingsiteforfree.com/differance.jpg

來源

2013-02-23 Shahar Meshulam

什麼問題？ Firefox和Opera在這裏顯示的幾乎相同。 – 2013-02-23 20:56:29

我已添加一張照片，以便最好地理解我遇到的問題。 http://shaharmesh.hostingsiteforfree.com/differance.jpg – 2013-02-24 13:24:34

我需要所有瀏覽器上的svg元素爲700X700 ... – 2013-02-24 13:25:30

火狐調試器顯示的大小相同，通過svgRoot.getBBox（結果，實際的SVG內容的邊界大小。

爲了避免這個問題，放置一個與畫布尺寸相同的隱形矩形或其他形狀來佔據svg的左上角和右下角。

<div id="wrapper"> 
    <div id="gameZone"> 
     <div id="background"> 
     <svg id="svgRoot" width="700" height="700"> 
      <rect width="100%" height="100%" stroke="none" visibility="hidden" pointer-events="none" /> 
      <circle cx="355" cy="600" r="10" id="ball" /> 
      <rect id="pad" height="15" width="150" x="280" y="670" rx="10" ry="20"/> 
     </svg> 
     </div> 
    </div> 
</div>

來源

2014-08-15 16:51:04 cuixiping

SVG不能設置的寬度和高度在Firefox

回答

相關問題