Question

我正在实施一个固定数量的'单位'的网格，它适应（适合）其容器的宽度。因此，为了使网格单元的数量保持不变，网格单元宽度是可变的，并且只要容器的宽度发生变化就适当地修改。

作为解决方案，我正在使用SVG模式：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="grid" width="{size}" height="{size}" patternUnits="userSpaceOnUse">
            <path d="M {size} 0 L 0 0 0 {size}" fill="none" stroke="#BBB" stroke-width="1"/>
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
</svg>

其中{size}根据容器宽度动态设置。这是relevant fiddle（注意在这种情况下容器的高度并不重要 - 只有宽度）。

从小提琴中可以看出，这在Chrome上运行良好但在Firefox [v29.0.1，对于Mac]上存在问题，因为网格通常不适合容器。随着后者的宽度发生变化，网格似乎总是偏离几个像素，好像有一些舍入误差。

这可以以某种方式修复，以便它在（现代）浏览器中按预期工作吗？

请注意，我对SVG的理解非常有限 - 老实说，上面的内容基本上是复制粘贴和调整以适应目的。如果有人可以向我指出相关文档，或者甚至提出一种完全不同的方法来实现相同的结果，那将非常有帮助。

[更新：这似乎特定于FF的 Mac版]

Answer 1

看看http://cs.sru.edu/~ddailey/svg/grid.svg 那里使用了两种不同的策略。在左侧，我使用了您的方法 - 在模式中绘制的路径然后应用于矩形。为了使其重新缩放，我使用了一个viewBox来声明所使用的坐标系。这是因为“路径”以绝对坐标而不是屏幕尺寸的百分比工作。右边的第二个，只是在模式中使用两条线，因为可以使用百分比绘制线条。 preserveAspectRatio事件可能并不理想，因为它允许宽高比改变，因此网格可能不会保持正方形。但它确实具有重新缩放到任何屏幕的优势。我不确定stackoverflow上的文化是否更喜欢源代码或链接到示例，但示例非常简短。

SVG网格（模式）在Firefox中行为不端

1 个答案: