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

SVG Grid lines are Blurred in Google Chrome while zooming but its work fine in Mozilla firefox

本文关键字：Mozilla 但在 Firefox 工作 网格线 Google Chrome SVG 缩放 模糊      更新时间：2023-09-26
<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小提琴：http://jsfiddle.net/KashifMKH/L46j18fo/6/

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

我在铬中玩弄你的小提琴。如果放大，网格线会变得模糊，在我看来也是如此。

所以我»手动«更改了html代码中的viewBox，以便最初缩放svg。小提琴

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

所以我认为很明显，如果 viewBox 发生变化，chrom - e/ium 不会重新渲染模式。您可以尝试使用直接 DOM 绑定来更新viewBox：

var  vb = a.viewBox.baseVal;
vb.x = ...
vb.y = ...
如果这

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

相关文章：