Несколько svg с одинаковыми идентификаторами

могу ли я поместить несколько svgs на html-страницу и использовать одни и те же идентификаторы во всех из них?

<div>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........        
  </svg>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........        
  </svg>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........        
  </svg>
</div>
6
css html javascript svg

4 ответов

поскольку спецификации определяют

3

Если вам нужно, чтобы SVGs был встроенным, вы должны рассмотреть возможность использования инжектора SVG, который изменяет идентификаторы на уникальные строки при вставке SVGs в HTML-документ

SVGInject добавляет случайную строку в конец идентификатора для элементов, определенных в . Например, svgPath может стать чем-то вроде svgPath-Dcs83KsE. Другие инжекторы SVG добавляют рабочий номер к идентификатору.

оба метода были начаты поэтому такое же SVG можно впрыснуть несколько раз в HTML-документ без создания конфликта идентификаторов. Но, конечно, он также работает для разных SVGs с конфликтующими идентификаторами.

2

вы не можете написать несколько атрибутов id в html. Атрибут Id должен быть уникальным в html-документе.

атрибут id указывает уникальный идентификатор (ID) своего элемента. Значение должно быть уникальным среди всех идентификаторов элемента.

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

вам нужно использовать атрибут класса для вашей цели.

1

идентификатор атрибута HTML всегда должен быть уникальным, если вы хотите использовать идентификатор несколькими способами вместо классов.

1