在 SVG 中绘制 1px 网格的最佳/最短方法
我需要使用嵌入网页中的 SVG 画布绘制 1 像素网格(10 像素间距)。有许多 SVG 标签可供选择,我希望有人可以建议哪些标签最适合这项工作并生成最少的代码。
例如,是否有更短的替代方案来使用
无论如何,请接受建议。
谢谢
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以制作一个
(本质上是问题中的图块)并用它填充任何形状。这是一个示例 该技术。
You can make a
<pattern>
(essentially the tile in your question) and fill any shape with that.Here's an example of that technique.
我不是专家(第 3 天!),但我确实知道 Google 在 Google 图表上使用矩形来执行此操作,其宽度或高度等于 1。没什么花哨的,只需用很多东西编写网格,例如这:
他们为什么这样做?不知道。他们的图形很好,所以大概有人考虑过它。我自己的倾向是用路径来做到这一点,使用“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:
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.