Can I change the size and margin of or firefox

2019-07-11 04:34发布

站内问答 / HTML/CSS
862 1 4

I have the next code:

<html>
    <head>
        <title>example00</title>
    </head>
    <body>
        aaaaaaaaaaaa
        <div data-id="95" id="map">
                        <style type="text/css">
                svg {
                    margin: 0;
                }
                g {
                    margin: 0;
                }
            </style>
            <svg height="500px" width="100%" pointer-events="all" style="border: 2px solid red;" xmlns="http://www.w3.org/2000/svg">
                <g class="viewport" transform="translate(-1134.8008037565835,-465.99275413153373)scale(2.7132086548953445)">
                    <g transform="translate(722.22 125)"><circle id="node_1" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(572.22 158.33)"><circle id="node_2" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(805.56 208.33)"><circle id="node_10" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(722.22 241.67)"><circle id="node_11" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(838.89 225)"><circle id="node_12" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    </g>
                </svg>
        </div>
    </body>
</html>

I think that the svg groups has not margins and align.

And the group elements in for example Chromium (fork Chrome) is shown good in the inspector, as you see in the screenshot:

chromium

But the firefox is shown with margins and a align a few to the right, as you see in the screenshot:

firefox

is it a bug? or is it something that I miss it in the code?

标签： html css svg
举报
1条回答
我只想做你的唯一
2楼-- · 2019-07-11 04:59

It is a bug. I found a small example to test:

<html>
    <head>
        <title>example00</title>
    </head>
    <body>
        <b>The border is the trap!!!!</b>
        <br />
        <svg height="200" width="200" style="border: 30px solid red;">
            <g class="first">
              <circle cx="20" cy="20" r="20" fill="green"></circle>
              <circle cx="70" cy="70" r="20" fill="purple"></circle>
            </g>
            <g class="second">
              <rect x="110" y="110" height="30" width="30" fill="blue"></rect>
              <rect x="160" y="160" height="30" width="30" fill="red"></rect>
            </g>
        </svg>
        <br />
        <b>This is without border and some love.</b>
        <br />
        <svg width="200" height="200">
            <g class="first">
              <circle cx="20" cy="20" r="20" fill="green"></circle>
              <circle cx="70" cy="70" r="20" fill="purple"></circle>
            </g>
            <g class="second">
              <rect x="110" y="110" height="30" width="30" fill="blue"></rect>
              <rect x="160" y="160" height="30" width="30" fill="red"></rect>
            </g>
        </svg>
    </body>
</html>

The problem is the border changes the positions of <g>.

These are the screenshots with the bug in firefox:

firefox_border_is_a_trap.jpg

firefox_without_border.jpg

And this is the screenshot in chromium (and it runs fine):

chromium_runs_fine.jpg

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)