Firefox中的SVG只能在小区域上绘制

时间:2014-02-07 12:26:08

标签: firefox svg

大家好! 请帮我解决一个问题。我有以下svg:

    <div style="height: 1257px; width: 728px;">
        <svg viewPort="0 0 728 1257" xmlns="http://www.w3.org/2000/svg">
            <line stroke="black" stroke-width="2" y2="100" x2="100" y1="100" x1="20"/>
            <line stroke="black" stroke-width="2" y2="150" x2="200" y1="154" x1="504"/>
            <line y2="353" x2="504" y1="459" x1="388" style="stroke:rgb(255,0,0);stroke-width:2"/>
            <line y2="353" x2="504" y1="400" x1="1141" style="stroke:rgb(255,0,0);stroke-width:2"/>
            <line y2="197" x2="602" y1="353" x1="504" style="stroke:rgb(255,0,0);stroke-width:2"/>
            <line y2="371" x2="957" y1="274" x1="749" style="stroke:rgb(255,0,0);stroke-width:2"/>
            <line y2="192" x2="1079" y1="371" x1="957" style="stroke:rgb(255,0,0);stroke-width:2"/>
        </svg>
    </div>

请在FF中查看:http://jsfiddle.net/SgAA5/

里面有7行。我可以在除Firefox之外的所有浏览器中正确看到它。这个svg怎么了?我试图通过不同的方式绘制线条,但我只看到在FF中:

enter image description here

只有一行,另一行的一部分。看起来只有小区域可供绘制。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

哦,我在stackoverflow上找到了解决方案:) Inline SVG with transforms not visible in Firefox, works fine in Chrome 这取决于标签参数。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 

是正确的方式