Geek Answers Handbook

Multiple svg with the same identifiers

Is it possible to place multiple svg on the html page and use the same identifiers in all of them?

<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>
+5
source share
3 answers

Since specifications define the id attribute as unique for each document, you must reorganize identifiers or use an alternative, for example. embedding via img or object tag.

 <img src="my.svg" height="100" alt="alternative Text"> <object type="image/svg+xml" data="my.svg" width="100" height="100"></object>
+3
source

The HTML tag identifier must always be unique if you want to use the identifier in several ways, use classes instead.

+1
source

You cannot write multiple id attributes in your html. Attribute id must be unique in the html document.

The id attribute indicates its unique element identifier (ID). The value must be unique among all identifiers in the element.

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

You need to use the class attribute for your purpose.

0
source

More articles:


All Articles