Почему сыпется svg?

Question

[Никита Ронзин]

Может кто сталкивался с подобным:
https://jsfiddle.net/ababinili/bjn5463y/6/
есть 2 svg элемента, круги. Если показывать только один элемент круг openChoiceFrame то он отображается как квадраты. Но если показать и openChoiceHandle то он становится кругом как должен был стать

Answer 1

[Ivan Bogachev]

Вы много раз используете такие штуки, как use и clip-path, указывая там id елементов. Но сами id на странице не уникальны. Вот и ломается все. Используйте уникальные id для элементов.

Comments

[profesor08]

Правильным советом будет не использовать id вообще.

[Ivan Bogachev]

profesor08, а как вы себе представляете практическое использование того же use совсем без id?

[profesor08]

Ivan Bogachev, да никак, вставлять svg картинкой, а внутри хоть обмазывайся ими. Если пихать инлайново, то никакие уникальные названия не помогут, если объект дублируется в нескольких местах. Надо городить что-то на уровне сборщика, чтоб гарантированно даже у одинаковых элементах генерировались разные id.

[Никита Ронзин]

profesor08, Если svg просто как элемент для красоты то согласен, можно без id. Но, мне нужно было чтобы части svg были анимируемы.