以SVG模式处理单个图块 [英] Manipulating individual tiles in an SVG pattern

问题描述

我正在尝试为网络游戏(HTML，JS等)创建一个交互式网格，其中每个单元格都应更改，即在悬停/单击时进行填充.我需要一个规则的正方形网格和一个三角形网格.我希望它是基于矢量的，以便可以很好地缩放以适合不同的屏幕尺寸.我认为最简单的方法是创建图案并将其填充在矩形上.这是我到目前为止的代码:

I'm trying to create an interactive grid for a web game (HTML, JS, etc.), in which every cell should change it's fill on hover/click. I need both a regular square grid, and a triangular grid. I want it to be vector based so that it will scale nicely to fit different screen sizes. I thought the easiest way would be to create a pattern and fill it on a rectangle. This is the code I have so far:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path id="tile" d="M 0,0 L 0,10 10,10 10,0 Z" fill="none" stroke="gray" stroke-width="1"/>
</pattern>

对于正方形，对于三角形网格:

For the square, and this for the triangular grid:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 5,0 L 10,2.5 10,7.5 5,10 0,7.5 0,2.5 Z" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 5,0 L 5,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,2.5 L 10,7.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,7.5 L 10,2.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,0 L 0,2.5 M 0,7.5 L 0,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 10,0 L 10,2.5 M 10,7.5 L 10,10" fill="none" stroke="gray" stroke-width=".1" />
</pattern>

它们产生我需要的网格，但是我不知道如何分别针对每个单元.我正在猜测，因为我没有找到关于此的任何信息，这是不可能的，除了应该使用的其他解决方案.有什么想法吗?

They produce the grids I need, but I don't know how to target each cell individually. I'm guessing since I've found no information on this, it's just not possible, and some other solution other than should be used. Any ideas?

我希望能够在单击鼠标时循环进行不同的填充.对于正方形网格，我使用在这里找到的代码: http://bl.ocks.org/bunkat/2605010 ，但对于三角形格子，我绝对不知道从哪里开始.这就是为什么我想到了.

I want to be able to cycle through different fills on mouse click. For the square grid, I'm using the code I found here: http://bl.ocks.org/bunkat/2605010 but for the triangular lattice, I have absolutely no idea where to begin. That's why I thought of .

PS:我可能应该补充一点，我没有编程经验，我正在尝试制作一款非图形游戏来教自己一些Java脚本.

PS: I should probably add I have no programming experience, I'm trying to make a nonogram game to teach myself some Javascript.

推荐答案

模式纯粹是装饰性的.在图案内定位单个图块就像在渐变内定位单个颜色一样.最好不要将它们视为独特的拼贴"，而应将其视为一张重复的墙纸.

Patterns are purely decorative. Targetting a single tile within a pattern would be like targetting a single colour within a gradient. Better not to think about them as distinct "tiles", and instead think of it as a sheet of repeating wallpaper.

那该怎么办?好吧，您将需要为每个要操纵的部件分配一个独特的元素.但是，由于它们基本相同，因此您需要使用<use>元素来重复图形.您需要做一些数学运算才能弄清楚如何正确地放置三角形，但又不比找出该模式要糟糕.当然，尽管可以在<defs>部分中对原始元素进行硬编码，但最简单的方法是在JS脚本中使用循环创建元素.

So what to do? Well, you are going to need a distinct element for each piece that you want to be able to manipulate. But since they are mostly the same, you'll want to use <use> elements to repeat the graphics. You'll need to do a bit of math to figure out how to position the triangles just right, but no worse than what you had to do to figure out that pattern. It will of course be easiest to create the elements with a loop in your JS script, although you could hard code the original elements in a <defs> section.

此外，您无需指定要对单个单元格进行的操作 .如果要更改它们的外观，可能会有助于记住您可以在<use>元素上设置样式，这些样式将被重复使用的图形继承.因此，如果您不直接设置填充/笔划，则可以通过设置<use>的样式来更改它们，而不必使用单独的，颜色不同的模板进行替换.

Moreover, you don't specify what you want to do with the individual cells. If you are going to be changing their appearance, it might help to remember that you can set styles on the <use> element and these will be inherited by the re-used graphics. So if you don't set fill/stroke directly, you can change them by styling the <use>, instead of having a separate, differently coloured template to swap in.

这篇关于以SVG模式处理单个图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！