Bootstrap dropdown-toggle 不适用于包裹在对象标签中的 svg答案

【问题标题】：Bootstrap dropdown-toggle doesn't work with svg wrapped in an object tagBootstrap dropdown-toggle 不适用于包裹在对象标签中的 svg
【发布时间】：2017-02-15 14:03:17
【问题描述】：

当我将我的 svg 内联到 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>

我尝试从 object 标记中删除 dropdown-toggle 类和 data-toggle 属性，以便它们仅保留在 svg 文件中，反之亦然，将它们从 svg 文件中删除并仅将它们放在对象中标签，当它们都在时，我尝试过，但无论如何它都不起作用。任何帮助，将不胜感激。谢谢:)

【问题讨论】：

什么是反对票...？
我假设 twitter-bootstrap 代码根本无法跨文档工作。
所以处理这个问题的唯一方法是真正将所有丑陋的 svg 转储到代码中，只是为了让它与 bs 下拉菜单一起工作？此外，您的假设回答了仅将切换类放在 svg 文件上并将其从对象标签中删除的情况，但是如果我将下拉切换放在对象标签本身上 - 那么它实际上不是跨文档，因为对象标签本身与下拉菜单 ul 在同一个 html 文档中，所以即使我们假设您的假设是正确的，为什么它不能那样工作？

标签： html css twitter-bootstrap svg dropdown

【解决方案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>

【讨论】：

感谢您的回复 Paul，但我知道它可以与 img 一起使用，但是如果我使用 img 而不是对象，我会失去对图标的 css 控制，所以我无法用一些纯 css 解决它，但有使用 jQuery 用内联 svg 复制 img，以便 css 类有效。是否有任何解决方法可以使用对象或其他包装（例如 img）来解决它，但又不会失去对 svg 的 css 控制？
CSS 不适用于跨文档边界，因此无论如何您都不能使用 CSS 设置 <object> SVG 样式（除非 SVG 文档本身有 CSS 规则）。
对，在 svg 的路径标签中有 css 类，正如我在上面编写的代码中所见，它有媒体查询和悬停伪类以及所有派对，它适用于对象但不带 img
"svg 的路径标签中有 css 类"。呃..不，没有
我的错误大声笑，不是在路径标签中，而是在 svg 标签中，oopsi (svg class="sidebar-icon-size notifications-icon dropdown-toggle")

【解决方案2】：

当我将 pointer-events: none 用于 SVG 元素时，它对我有用。我总是将点击事件注册到父元素（但不直接注册到 SVG 元素）

【讨论】：