Selecting duplicate id from SVG exported from Illustrator in d3.js
I am currently trying to work with a fairly complex SVG created in Illustrator with d3.js. An SVG is a floor plan, each floor of which is its own layer. To show one floor, I just need to show this layer and hide the others, which is very convenient to store in one SVG.
The problem I am having is that when exporting from Illustrator, there are multiple items with the same name. For example, I have an item Elevator A
at each floor level. When I export to SVG it will remove the duplicate ID by renaming it to something like id = "elevator_a_1"
and id = "elevator_a_2"
(but not necessarily ok). I suppose one way to solve the problem in Illustrator would be to name each element uniquely, but I think it spoils my organization a little.
My questions:
- Is it a strict rule that an identifier cannot be repeated in SVG, even if it is inside a hierarchy? For example.
1st_floor->elevator_a
.2nd_floor->elevator_a
, which will never be visible at the same time. - Is there a way to select id in d3 only at the beginning of the id (perhaps via regex or jquery-like )? For example.
d3.select("[id^='elevator_a']")
source to share
-
IDs must not be duplicated - they must be unique no matter where they appear.
-
Selectors D3 CSS selectors . You can use regular expressions for attribute names using exactly the syntax in your question.
source to share