Bootstrap dropdown-toggle не работает с svg, завернутым в тег объекта

Question

Когда я помещаю свой svg inline в html и помещаю в него класс выпадающего списка, он отлично работает. Но когда я обертываю его тегом объекта, он показывает сам svg, но когда я нажимаю на него, он не отображает выпадающее меню или в ближайшее время - он не работает.

Вот код, который работает с инлайн:

SVG

<div class="dropdown pull-left"> 
    <svg class="sidebar-icon-size notifications-icon dropdown-toggle" 
     data-toggle="dropdown" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 12.7 14" style="enable-background:new 0 0 12.7 14;" xml:space="preserve"> 
     <path d="M6.1,9.5c-1.6,0.6-2.7,1.3-3.4,1.9c0.5,0.5,1.5,0.6,2.4,0.2c1.2-0.4,1.9-1.5,1.7-2.3c0,0,0,0,0,0C6.5,9.3,6.3,9.4,6.1,9.5 
      M7.1,12.2c-3.1,1.1-5.6,0.5-5.7,0.2c-0.2-0.5,1-2.2,4.5-3.5c3.5-1.3,5.5-0.8,5.7-0.2C11.7,9,10.1,11.1,7.1,12.2 M10,5.8 
      C8.2,1.9,7.3,0.5,4.3,0.5c-1.1,0-0.8-0.8-1.6-0.5C1.9,0.4,2.6,0.8,1.8,1.5c-2.3,1.9-2.1,3.6-1,7.8c0.4,1.7-1.1,1.8-0.5,3.5 
      C0.7,14,4,14.5,7.4,13.3c3.4-1.3,5.6-3.8,5.2-5C12,6.5,10.8,7.5,10,5.8" /> 
    </svg> 
    <ul class="topbar-menu dropdown-menu pull-right" style="width:200px;"> 
     <li>blabla 1</li> 
     <li>blabla 2</li> 
     <li>blabla 3</li> 
    </ul> 
</div> 

А вот код, который не работает с объектной оберткой тегом:

<div class="dropdown pull-left"> 

    <object class="topbar-icon-size notifications-icon dropdown-toggle" 
          data-toggle="dropdown" 
          data="../../Styles/Icons/Notifications.svg" 
          type="image/svg+xml"></object> 
    <ul class="topbar-menu dropdown-menu pull-right" style="width:200px;"> 
     <li>blabla 1</li> 
     <li>blabla 2</li> 
     <li>blabla 3</li> 
    </ul> 
</div> 

Я попытался удалить выпадающее меню -toggle и атрибут data-toggle из тега объекта, чтобы они оставались только в svg-файле, я попробовал наоборот, удалить их из файла svg и поместить их только в тег объекта, я попробовал, когда они включены но это все равно не сработало. Любая помощь будет оценена по достоинству. Спасибо :)

Answer 1

Я подозреваю, что причиной может быть из-за ограничений безопасности браузера, связанных с нажатием на <object> элементов.

Попробуйте вместо этого использовать <img>.

<div class="dropdown pull-left"> 

    <img class="topbar-icon-size notifications-icon dropdown-toggle" 
          data-toggle="dropdown" 
          src="../../Styles/Icons/Notifications.svg"/> 
    <ul class="topbar-menu dropdown-menu pull-right" style="width:200px;"> 
     <li>blabla 1</li> 
     <li>blabla 2</li> 
     <li>blabla 3</li> 
    </ul> 
</div>