javascript - 缩放时 SVG 网格线在 Google Chrome 中模糊，但在 Mozilla firefox 中工作正常

Question

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1300" height="900" viewBox="0 0 750 300" id="mainsvg">

    <g>
        <defs>
            <pattern x="0" y="0" width="1.6" id="smallGrid" height="1.6" patternUnits="userSpaceOnUse">
                <path d="M 10 0 L 0 0 0 10" id="smallgridbox" fill="none" stroke="rgb(8,24,77)" stroke-width="1"></path>
            </pattern>
            <pattern width="16" id="grid" height="16" patternUnits="userSpaceOnUse" x="687.47" y="0" shape-rendering="geometricPrecision">
                <rect fill="url(#smallGrid)" width="16" height="16" fill-opacity="0.5"></rect>
                <path d="M 100 0 L 0 0 0 100" id="largegridbox" fill="none" stroke="rgb(8,24,77)" stroke-width="1"></path>
            </pattern>
        </defs>

        <rect fill="url(#grid)" width="1375" height="773" x="0" y="0" fill-opacity="0.5"></rect>
    </g>
</svg>

这是 JS fiddle :http://jsfiddle.net/KashifMKH/L46j18fo/6/

它在 Mozilla Firefox 中运行良好，但在 Chrome 中却不行。将其放大，然后比较 Mozilla 和 Chrome 中的结果:您会清楚地看到差异。我该如何解决？

Answer 1

我用 chromium 玩过你的 fiddle 。如果放大，网格线会变得模糊，这对我来说也是如此。

所以我»手动«更改了viewBox在 html 代码中，以便最初缩放 svg。 Fiddle

结果:没有模糊的网格线。

所以我认为很明显，如果 viewBox 发生变化，chrom - e/ium 不会重新呈现图案。您可以尝试更新 viewBox通过使用直接的 DOM 绑定(bind):

var  vb = a.viewBox.baseVal;
vb.x = ...
vb.y = ...

如果这不起作用，我会尝试使用转换，如果那不起作用，我认为您不能使用 <pattern>创建网格和<use>由 Javascript 创建的元素是下一个选项。