我可以更改< g>的尺寸和边距吗？或火狐有一个错误？ [英] Can I change the size and margin of <g> or firefox has a bug?
问题描述
我有下一个代码：
< html>
< head>
< title> example00< / title>
< / head>
< body>
aaaaaaaaaaaa
< div data-id =95id =map>
< style type =text / css>
svg {
margin：0;
}
g {
margin：0;
}
< / style>
< svg height =500pxwidth =100％pointer-events =allstyle =border：2px solid red;的xmlns = http://www.w3.org/2000/svg >
< g class =viewporttransform =translate（-1134.8008037565835，-465.99275413153373）scale（2.7132086548953445）>
< g transform =translate（722.22 125）>< circle id =node_1class =nodestyle =fill：rgb（50，50，128）; R = 6/>< / g取代;
< g transform =translate（572.22 158.33）>< circle id =node_2class =nodestyle =fill：rgb（50，50，128）; R = 6/>< / g取代;
< g transform =translate（805.56 208.33）>< circle id =node_10class =nodestyle =fill：rgb（50，50，128）; R = 6/>< / g取代;
< g transform =translate（722.22 241.67）>< circle id =node_11class =nodestyle =fill：rgb（50，50，128）; R = 6/>< / g取代;
< g transform =translate（838.89 225）>< circle id =node_12class =nodestyle =fill：rgb（50，50，128）; R = 6/>< / g取代;
< / g>
< / svg>
< / div>
< / body>
< / html>
我认为svg组没有页边距和对齐方式。
例如Chromium（fork Chrome）中的组元素在检查器中显示效果良好，如屏幕截图所示：
但是firefox显示的是页边空白，并且右对齐几个，如屏幕截图所示：
这是一个错误吗？或者是我在代码中错过它的东西？
这是一个错误。我找到一个小例子来测试：
< html>
< head>
< title> example00< / title>
< / head>
< body>
< b>边框是陷阱!!!!< / b>
< br />
< svg height =200width =200style =border：30px solid red;>
< g class =first>
< circle cx =20cy =20r =20fill =green>< / circle>
< circle cx =70cy =70r =20fill =purple>< / circle>
< / g>
< g class =second>
< rect x =110y =110height =30width =30fill =blue>< / rect>
< rect x =160y =160height =30width =30fill =red>< / rect>
< / g>
< / svg>
< br />
< b>这是没有边界和一些爱的。< / b>
< br />
< svg width =200height =200>
< g class =first>
< circle cx =20cy =20r =20fill =green>< / circle>
< circle cx =70cy =70r =20fill =purple>< / circle>
< / g>
< g class =second>
< rect x =110y =110height =30width =30fill =blue>< / rect>
< rect x =160y =160height =30width =30fill =red>< / rect>
< / g>
< / svg>
< / body>
< / html>
问题在于边界改变了 以下是Firefox中的错误截图： 是铬的屏幕截图（它运行良好）： I have the next code: 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: But the firefox is shown with margins and a align a few to the right, as you see in the screenshot: is it a bug? or is it something that I miss it in the code? It is a bug. I found a small example to test: The problem is the border changes the positions of These are the screenshots with the bug in firefox: And this is the screenshot in chromium (and it runs fine): 这篇关于我可以更改< g>的尺寸和边距吗？或火狐有一个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< g>
$ p
$ b
<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>
<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>
<g>.
