Почему при использовании тега object к нему добавляется дочерний объект #document?

Question

[pvgdrk]

Html. Использовал для кнопки внешний svg:

<div id="myButton" class="myButton">
    <object type="image/svg+xml" data='{% static "svg/icon1.svg" %}'></object>
</div>

Для кнопки назначен onclick.
Онклик после использования svg работать перестал. Заглянул в dom - структура такая:

<div>
    <object>
        #document
            <svg></svg>
    <object/>
<div/>

Как здесь оказался #document? я такого не заказывал. Событие, видимо, упирается в него и потому не доходит до div, не срабатывает. Как правильно поступить в этой ситуации?

Answer 1

[Евгений Петров]

Так и должно происходить, потому что object (прямой аналог — embed) необходим для подключения внешних ресурсов с разным типом контента — для загружаемого содержания создаётся свой глобальный контекст.
Есть и другие inline-block контейнеры для внедрения контента строго определённого типа (класса типов) — iframe, img, video, audio, canvas.

Вам следует использовать SVG либо в качестве фона, либо прямой вставкой. Во втором случае не будет никакого отдельного глобального контекста — в текущем будет задействовано другое пространство имён.

Вот пример jsfiddle.net/petroveg/vuukha2s