CSS селекторы, не зная тип элемента это

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/.

Если не по идентификатору (группа может содержать несколько элементов, которые необходимо заполнить) или по классу CSS (мне, очевидно, необходимо знать тип элемента, выбранный пользователем), как я могу пометить элементы в группе для последующего выбора и манипулирования?

ОБНОВЛЕНО:

Вот ответ. Спасибо, Дункан!

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

Answer 1

Вы должны иметь возможность добавлять любой понравившийся вам атрибут, если он начинается с data-так например data-condition="alive", Затем вы можете выбрать с помощью селектора CSS [data-condition="alive"],

Вы можете сделать более сложный выбор с атрибутами, см. https://www.w3schools.com/css/css_attribute_selectors.asp