我有下一个代码:
<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>
我认为 svg 组没有边距和对齐。
并且 Chromium(fork Chrome)中的组元素在检查器中显示良好，如您在屏幕截图中所见:
但是 firefox 显示时带有边距并且向右对齐了一些，如您在屏幕截图中所见:
这是一个错误吗？还是我在代码中遗漏了什么？
最佳答案
这是一个错误。我找了一个小例子来测试:
<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>的位置.
这些是 firefox 中存在错误的屏幕截图:
这是 chromium 的屏幕截图(运行良好):
关于html - 我可以更改 <g> 的大小和边距吗？或者 firefox 有错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35555625/