當我將我的svg嵌入到html中並在其中放置了一個下拉切換類時,它完美地起作用。 但是當我用對象標籤包裝它時,它顯示svg本身,但是當我點擊它時,它不顯示下拉菜單,或者很快 - 它不起作用。Bootstrap下拉切換不適用於包裹在對象標籤中的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>
我試圖消除下拉 - 從對象標籤中關閉類和數據切換屬性,以便它們僅保留在svg文件中,我反之亦然,將它們從svg文件中刪除,並將它們僅放置在對象標記中,我試着在它們處於無論如何,但它不工作。 任何幫助,將不勝感激。 謝謝:)
什麼是對......的反對票? –
我認爲twitter-bootstrap代碼根本無法工作跨文檔。 –
所以處理這個問題的唯一方法就是將所有醜陋的svg轉儲到代碼中,以便使其能夠與bs下拉菜單一起使用?另外,你的假設回答了將切換類僅放在svg文件並將其從對象標記中移除的情況,但是如果我將下拉切換到對象標記本身 - 那麼它不是真正的跨文檔,因爲對象標籤本身與下拉菜單ul位於相同的html文檔中,所以即使我們假設您的假設是正確的,爲什麼它不以這種方式工作呢? –