将 SVG 添加到我的 html 会产生 jQuery 错误答案

【问题标题】：Adding SVGs to my html produces jQuery errors将 SVG 添加到我的 html 会产生 jQuery 错误
【发布时间】：2016-12-09 04:33:10
【问题描述】：

这是我的 core-navigation.html 代码：

<div class="re-core-navigation-menu">
  <ul class="re-navigation-sidebar" [ngClass]="{'re-sidebar-wide': !isSmallSidebar}">
    <li>
      <div (click)="toggleSidebar($event)">
        <!-- <img src="./assets/navigation/sidebar-extend-icon.svg" width="12" height="12" class="re-sidebar-expand-img" /> -->
      </div>
    </li>
    <li>
      <div>
         <object type="image/svg+xml" data="./assets/re-logo.svg" class="logo">
        </object> 
      </div>
    </li>
    </li>
  </ul>
</div>

这是re-logo.svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Logo-nav</title>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Logo-nav">
            <g>
                <circle id="Oval" fill="#FFFFFF" cx="24" cy="24" r="24"></circle>
                <path d="M20.848,32 L17.176,25.256 L15.784,25.256 L15.784,32 L11.752,32 L11.752,15.008 L18.232,15.008 C19.0480041,15.008 19.8439961,15.0919992 20.62,15.26 C21.3960039,15.4280008 22.0919969,15.711998 22.708,16.112 C23.3240031,16.512002 23.8159982,17.0399967 24.184,17.696 C24.5520018,18.3520033 24.736,19.1679951 24.736,20.144 C24.736,21.2960058 24.4240031,22.2639961 23.8,23.048 C23.1759969,23.8320039 22.3120055,24.3919983 21.208,24.728 L25.648,32 L20.848,32 Z M20.68,20.216 C20.68,19.815998 20.5960008,19.4920012 20.428,19.244 C20.2599992,18.9959988 20.0440013,18.8040007 19.78,18.668 C19.5159987,18.5319993 19.2200016,18.4400002 18.892,18.392 C18.5639984,18.3439998 18.2480015,18.32 17.944,18.32 L15.76,18.32 L15.76,22.28 L17.704,22.28 C18.0400017,22.28 18.3839982,22.2520003 18.736,22.196 C19.0880018,22.1399997 19.4079986,22.0400007 19.696,21.896 C19.9840014,21.7519993 20.2199991,21.5440014 20.404,21.272 C20.5880009,20.9999986 20.68,20.6480022 20.68,20.216 L20.68,20.216 Z M35.392,24.656 C35.392,24.0319969 35.196002,23.4960022 34.804,23.048 C34.411998,22.5999978 33.8240039,22.376 33.04,22.376 C32.6559981,22.376 32.3040016,22.4359994 31.984,22.556 C31.6639984,22.6760006 31.3840012,22.839999 31.144,23.048 C30.9039988,23.256001 30.7120007,23.4999986 30.568,23.78 C30.4239993,24.0600014 30.3440001,24.3519985 30.328,24.656 L35.392,24.656 Z M39.016,26.168 L39.016,26.648 C39.016,26.8080008 39.0080001,26.9599993 38.992,27.104 L30.328,27.104 C30.3600002,27.4400017 30.4599992,27.7439986 30.628,28.016 C30.7960008,28.2880014 31.0119987,28.523999 31.276,28.724 C31.5400013,28.924001 31.8359984,29.0799994 32.164,29.192 C32.4920016,29.3040006 32.8319982,29.36 33.184,29.36 C33.8080031,29.36 34.3359978,29.2440012 34.768,29.012 C35.2000022,28.7799988 35.5519986,28.4800018 35.824,28.112 L38.56,29.84 C37.9999972,30.6560041 37.2600046,31.2839978 36.34,31.724 C35.4199954,32.1640022 34.3520061,32.384 33.136,32.384 C32.2399955,32.384 31.392004,32.2440014 30.592,31.964 C29.791996,31.6839986 29.092003,31.2760027 28.492,30.74 C27.891997,30.2039973 27.4200017,29.5440039 27.076,28.76 C26.7319983,27.9759961 26.56,27.080005 26.56,26.072 C26.56,25.0959951 26.7279983,24.212004 27.064,23.42 C27.4000017,22.627996 27.8559971,21.9560028 28.432,21.404 C29.0080029,20.8519972 29.6879961,20.4240015 30.472,20.12 C31.2560039,19.8159985 32.1039954,19.664 33.016,19.664 C33.8960044,19.664 34.7039963,19.8119985 35.44,20.108 C36.1760037,20.4040015 36.8079974,20.8319972 37.336,21.392 C37.8640026,21.9520028 38.2759985,22.631996 38.572,23.432 C38.8680015,24.232004 39.016,25.1439949 39.016,26.168 L39.016,26.168 Z" id="Re" fill="#3B9DCD"></path>
                <rect id="Rectangle-3" fill="#3B9DCD" x="16" y="13" width="2.5" height="2"></rect>
                <rect id="Rectangle-3-Copy" fill="#3B9DCD" x="32" y="18" width="2.5" height="2"></rect>
                <rect id="Rectangle-3-Copy" fill="#3B9DCD" x="32" y="32" width="2.5" height="2"></rect>
            </g>
        </g>
    </g>
</svg>

当我显示这个 SVG 时，浏览器 ( chrome latest ) 给我这个错误：

Angular 2 正在开发模式下运行。调用 enableProdMode() 到启用生产模式。 jquery.js:2 未捕获的类型错误：不能读取未定义 colorpicker.js:397 的属性“不透明度”未捕获 ReferenceError: jQuery 未定义 jquery.tipsy.js:216 Uncaught ReferenceError: jQuery 未定义 selectize.js:9 Uncaught ReferenceError: jQuery 未定义 init.js:4 Uncaught ReferenceError: $ is not defined jquery.js:2 Uncaught TypeError: 无法读取 undefined(...) colorpicker.js:397 的属性“不透明度” 未捕获的 ReferenceError: jQuery 未定义(…) jquery.tipsy.js:216 Uncaught ReferenceError: jQuery is not defined(...) selectize.js:9 Uncaught ReferenceError: jQuery is not defined(...) init.js:4 Uncaught ReferenceError: $ 未定义(…)

我不知道是什么原因造成的。我已经从 Mac 的 Sketch 应用程序中导出了 SVG。

删除 SVG 不会显示任何错误
我的 index.html 中包含 jQuery，如下所示：
使用<img> 代替<object> 不会导致错误？但是使用<img> 将不允许我更改 SVG 的颜色，所以我需要一种方法。
Full PAGE
当我将鼠标悬停在错误上时，我得到如下信息：

chrome-extension//loooong-string/libs/jquery.js:formatted:952

chrome-extension//looong-string/libs/tipsy/jquery.tipsy.js:216

【问题讨论】：

你应该发布更多的页眉；您似乎不止一次地包含了一些文件。
你也在混合 $ 和 jQuery
@darryn.ten 你是什么意思？
@darryn.ten 是的，我明白了......但这并没有改变任何东西......
你解决过这个问题吗？我对几乎所有相同的错误消息都有类似的问题。但我最近没有添加任何新的 SVG 元素。

标签： javascript jquery html css svg

【解决方案1】：

tl;dr：尝试禁用您最近添加或最近更新的任何扩展。具体来说，查找具有与 jQuery 相关的已知问题的 StyleBot，它会准确地生成此错误消息组合。

我在 Chrome 中有完全相同的错误消息字符串。它们有一天突然出现，再多的还原或分支切换都不会让它们消失。

然后我尝试了 Firefox。没有错误信息。

我的同事和我使用的是同一版本的 Chrome，并且没有收到这些错误，所以我回去寻找我在上周左右添加的任何新扩展程序。只有一个新的。它是 StyleBot。我禁用了它，jQuery 错误神奇地消失了。

然后我发现了这个：https://github.com/ankit/stylebot/issues/449。

【讨论】：