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

Question

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

不过，问题是 SVG.js 似乎在 class 名称前加上元素类型，但呈现代码不需要该信息。

代码如下：

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);

这是 fiddle：https://jsfiddle.net/Perlkonig/so12hev3/。

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

更新：

答案在这里。谢谢，邓肯！

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

Answer 1

您应该可以添加您喜欢的任何属性，只要它以 data- 开头，例如 data-condition="alive"。然后，您可以 select 与 CSS select 或 [data-condition="alive"].

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

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

CSS selectors without knowing the type of element it is

svg.js