在 SVG 中绘制 1px 网格的最佳/最短方法

发布于 2024-11-14 14:49:31 字数 208 浏览 1 评论 0原文

我需要使用嵌入网页中的 SVG 画布绘制 1 像素网格(10 像素间距)。有许多 SVG 标签可供选择,我希望有人可以建议哪些标签最适合这项工作并生成最少的代码。

例如,是否有更短的替代方案来使用绘制路径?标签?也许可以定义一个 10px x 10px 的正方形,然后以某种方式在画布上重复它。

无论如何,请接受建议。

谢谢

I need to draw a 1px grid (10px spacing) using the SVG canvas embedded within a webpage. There are many SVG tags to choose from and I was hoping someone could suggest what tags would be best suited for the job and produce the least amount of code.

For instance, is there a shorter alternative to plotting the path using the <path> tag? Perhaps by defining a square 10px x 10px then somehow repeating it accross the canvas.

Anyway, open to suggestions please.

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

我为君王 2024-11-21 14:49:31

您可以制作一个 (本质上是问题中的图块)并用它填充任何形状。

这是一个示例 该技术。

You can make a <pattern> (essentially the tile in your question) and fill any shape with that.

Here's an example of that technique.

随风而去 2024-11-21 14:49:31

我不是专家(第 3 天!),但我确实知道 Google 在 Google 图表上使用矩形来执行此操作,其宽度或高度等于 1。没什么花哨的,只需用很多东西编写网格,例如这:

<rect x="86" y="61" width="1" height="198" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#cccccc"></rect>

他们为什么这样做?不知道。他们的图形很好,所以大概有人考虑过它。我自己的倾向是用路径来做到这一点,使用“h”和“v”表示相对水平和垂直线。它更紧凑,但输出可能不太好。

I'm not an expert (day 3!), but I do know that Google uses rects to do this on Google charts, with either a width or a height equal to 1. Nothing fancy, just write the grid with lots of stuff like this:

<rect x="86" y="61" width="1" height="198" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#cccccc"></rect>

Why do they do this? Don't know. Their graphics are good, so someone has presumably thought about it. My own inclination is to do this with paths, using 'h' and 'v' for relative horizontal and vertical lines. It's more compact, but the output may not be so good.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文