添加SVGs到我的html產生的jQuery錯誤

Question

這是我的核心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> 

，這是重新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最新）使我這個錯誤：

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. jquery.js:2 Uncaught TypeError: Cannot read property 'opacity' of undefined colorpicker.js:397 Uncaught ReferenceError: jQuery is not defined jquery.tipsy.js:216 Uncaught ReferenceError: jQuery is not defined selectize.js:9 Uncaught ReferenceError: jQuery is not defined init.js:4 Uncaught ReferenceError: $ is not defined jquery.js:2 Uncaught TypeError: Cannot read property 'opacity' of undefined(…) colorpicker.js:397 Uncaught ReferenceError: jQuery is not defined(…) jquery.tipsy.js:216 Uncaught ReferenceError: jQuery is not defined(…) selectize.js:9 Uncaught ReferenceError: jQuery is not defined(…) init.js:4 Uncaught ReferenceError: $ is not defined(…)

我不知道是什麼原因造成的。我已經從Mac的Sketch應用程序導出了SVG。

• 刪除在沒有錯誤的SVG結果中顯示

• 我包括在我的index.html的jQuery如下：

• 使用<img>代替<object>不會導致錯誤？但使用<img>不會讓我改變SVG的顏色，所以我需要一種方法。

• Full PAGE

• 當我將鼠標懸停在錯誤我得到的東西，如：

鉻擴展//過長...串/庫/的jquery.js：格式化：952

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

Answer 1

tl; dr：嘗試禁用最近添加或最近更新的任何擴展。具體來說，查找具有與jQuery相關的已知問題的StyleBot，該問題完全產生了這組錯誤消息。

我在Chrome中有完全相同的錯誤消息字符串。他們有一天從哪裏出現，沒有任何回覆或分支交換會讓他們離開。

然後我試着Firefox。沒有錯誤消息。

我的同事與我使用的Chrome版本相同，但沒有收到這些錯誤，所以我回去查找了我在上週左右添加的任何新擴展。只有一個新的。這是StyleBot。我禁用了它，並且jQuery錯誤神奇地消失了。

然後我發現這個：https://github.com/ankit/stylebot/issues/449。