Question

我正在尝试渲染游戏板。我定义了一个通用的“片断”组，其中可能包含许多不同的元素。没有什么可以阻止用户制作他们想要的复杂游戏。但是我要做需要知道的是，哪些元素需要用当前玩家的颜色填充。我希望使用select()和CSS选择器来做到这一点。

但是，问题在于SVG.js似乎在类名的前面加上了元素的类型，但是呈现代码不必具有该信息。

代码如下：

var canvas = SVG('canvas')

// Create a new group in the <defs> tag that will contain the piece
const group = canvas.defs().group().id("piece");

// Add various elements to the piece.
group.circle(100)
  // Only *this* element should be filled with a colour
  .addClass("playerfill")
  .fill("#fff")
  .stroke({width: 2, color: "#000"});
group.circle(5).center(50,50).fill("black");

var use = SVG.get("piece");
// I have to prepend `circle.` to make this work!
var set = use.select("circle.playerfill").fill("red");
canvas.use(use);

这是小提琴：https://jsfiddle.net/Perlkonig/so12hev3/。

如果不是通过ID（该组可能包含多个需要填充的元素）或通过CSS类（我显然需要了解用户选择的元素的类型），该如何标记组中的元素以供以后选择和操作？

已更新：

这是答案。谢谢，邓肯！

https://jsfiddle.net/Perlkonig/8b92xdj1/

Answer 1

只要属性以unique([],[]). unique([X|XS],[X|L]) :- integer(X), unique(XS,L). unique([X|XS],L) :- \+integer(X), unique(XS,L).开头，就应该可以添加任何您喜欢的属性，例如data-。然后，您可以使用CSS选择器data-condition="alive"进行选择。

您可以使用属性进行更复杂的选择，请参见https://www.w3schools.com/css/css_attribute_selectors.asp

CSS选择器，不知道元素的类型

1 个答案: