I'm using d3 to plot data and want to zoom in heavily. Up to the point where I reach a scale factor above 10000 and a translation of more then 40000000.
The problem is that that my plot starts to disappear when reaching a translate value of above 30000000 and a scale value of above 1000. So I investigated and found the problem: a too high translation value. For this I created the following 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>It should have 6 green bars (using translate and scale) and 5 blue bars (using only translate). Every major Browser (Chrome, Firefox, IE/Edge) renders it wrong but differently. Inkscape and a GIMP import however are rendering the expected result. Is there any way to fix this problen in a web browser?
Further explanation regarding this SVG (observations in Chrome): I used a path starting at X = 0, creating a horizontal line of 20 units and applied different x axis transformations - starting by 0 and increasing by 10000000 every step. In addition I modified the start point of the path in that way that it should be at 0 after the transformation. After the Path disappeared I modified the trunsformation further to get to the specific number at which this problem startet. At translate(33754000 0) I found the green bar ending in the svg, so at a point bit below that the problem must had started.
Using the same value but removing the Scale factor of 1000 I discovered that the same values yield a differend result. Further modifieing the translation I found translate(33554440 80) where the bar is half off the screen.
