我正在使用 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 处。路径消失后，我进一步修改了转换以获取此问题开始的特定数字。在translate(33754000 0) 处，我发现了以 svg 结尾的绿色条，因此在低于该点的位置一定是问题开始了。
使用相同的值但删除 1000 的比例因子，我发现相同的值会产生不同的结果。进一步修改我发现translate(33554440 80)的翻译，其中栏位于屏幕的一半。