我正在使用d3绘制数据并希望大幅放大。直到我达到10000以上的比例因子和超过40000000的转换。
问题在于，当达到大于30000000的翻译值且比例值大于1000时，我的情节开始消失。所以我调查并发现了问题：翻译价值太高。为此，我创建了以下SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="250" viewBox="0 0 1000 250">
<rect width="1000" height="250" fill="pink">
</rect>
<g transform="translate(5 5)">
<g transform="translate(33754000 0) scale(10000 1)">
<path d="M-3375.4 0 h20" fill="none" stroke="green" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(40000000 10) scale(10000 1)">
<path d="M-4000 0 h20" fill="none" stroke="green" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(30000000 20) scale(10000 1)">
<path d="M-3000 0 h20" fill="none" stroke="green" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(20000000 30) scale(10000 1)">
<path d="M-2000 0 h20" fill="none" stroke="green" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(10000000 40) scale(10000 1)">
<path d="M-1000 0 h20" fill="none" stroke="green" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(0 50) scale(10000 1)">
<path d="M0 0 h20" fill="none" stroke="green" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(40000000 60)">
<path d="M-40000000 0 h20" fill="none" stroke="blue" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(33754000 70)">
<path d="M-33754000 0 h20" fill="none" stroke="blue" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(33554440 80)">
<path d="M-33554440 0 h20" fill="none" stroke="blue" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(32000000 90)">
<path d="M-32000000 0 h20" fill="none" stroke="blue" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
<g transform="translate(0 100)">
<path d="M0 0 h20" fill="none" stroke="blue" stroke-width="5" vector-effect="non-scaling-stroke" shape-rendering="crispEdges">
</path>
</g>
</g>
</svg>
它应该有6个绿色条（使用平移和缩放）和5个蓝色条（仅使用平移）。每个主要的浏览器（Chrome，Firefox，IE / Edge）都会出错，但却有所不同。然而，Inkscape和GIMP导入正在呈现预期结果。 有没有办法在网络浏览器中修复此问题？
关于此SVG的进一步说明（Chrome中的观察）： 我使用了从X = 0开始的路径，创建了20个单位的水平线并应用了不同的x轴变换 - 从0开始，每步增加10000000。另外，我修改了路径的起点，使其在转换后应该为0。在Path消失之后，我进一步修改了trunsformation以获得此问题的特定数字。在 translate（33754000 0）我发现绿色条在svg中结束，所以在低于该位置的位置，问题必须已经开始。
使用相同的值但删除比例因子1000我发现相同的值会产生差异结果。进一步修改翻译我发现 translate（33554440 80），其中栏距离屏幕一半。