3

私は非常に迷惑なこの問題を解決しようとしています....

幅と高さが 700px の svg 要素を持つシンプルな構造の html:

<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>

問題は、Firefoxで幅と高さなしでsvgが表示されるのはなぜですか？クロムで、つまり100％動作します。

この問題を解決するのを手伝ってください。

ここに問題のスクリーンショットがあります: http://shaharmesh.hostingsiteforfree.com/differance.jpg

4

1 に答える 1

0

Firefox デバッガーは、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-15T16:51:04.420 に答える