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小提琴：http://jsfiddle.net/KashifMKH/L46j18fo/6/

在Mozilla Firefox中可以正常使用，但在Chrome中则无效。将其放大，然后比较Mozilla和Chrome中的结果：您将清楚地看到差异。我该如何解决？

Answer 1

我玩弄你的小提琴。如果一个人进入，那么网格线会变得模糊，对我来说也是如此。

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

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

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

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

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

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

1 个答案: