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

时间:2016-11-22 14:33:49

标签: javascript jquery html css svg

这是我的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>

这是重新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未捕获的TypeError:不能   读取属性'opacity'未定义的colorpicker.js:397未捕获   ReferenceError:jQuery未定义jquery.tipsy.js:216未捕获   ReferenceError:jQuery未定义selectize.js:9未捕获   ReferenceError:jQuery未定义init.js:4未捕获   ReferenceError:$未定义jquery.js:2未捕获的TypeError:   无法读取undefined(...)colorpicker.js:397的属性'opacity'   未捕获的ReferenceError:jQuery未定义(...)jquery.tipsy.js:216   未捕获的ReferenceError:未定义jQuery(...)selectize.js:9   未捕获的ReferenceError:jQuery未定义(...)init.js:4未捕获   ReferenceError:$未定义(...)

我不知道造成这些的原因。我已从Sketch应用程序for Mac导出SVG。

  • 删除SVG导致无错误显示
  • 我的index.html中包含jQuery,如下所示:

  • 使用<img>代替<object>不会导致错误?但是使用<img>将不允许我更改SVG的颜色,所以我需要一种方法。

  • Full PAGE

  • 当我将鼠标悬停在错误上时,我会收到以下内容:

铬扩展//过长...串/库/的jquery.js:格式化:952

铬扩展// looong串/库/醉意/ jquery.tipsy.js:216

1 个答案:

答案 0 :(得分:0)

tl; dr:尝试停用您最近添加或最近更新的任何扩展程序。具体来说,查找StyleBot,它有一个与jQuery相关的已知问题,它恰好产生了这组错误消息。

我在Chrome中有完全相同的错误消息串。它们有一天无处不在,没有任何恢复或分支转换会让它们消失。

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

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

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