ルータリンクがAngular2のSVGで動作しない

Question

私のツールバーをブートストラップのグリフコンからカスタムSVGに変更しました。私は1つの.cssファイルでスタイルを設定する必要があるため、SVGを外部から参照しました。私のhtmlコンポーネントは次のようになります：

<div class="container-fluid"> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/text-properties']"> 
    <object type="image/svg+xml" data="assets/svg/cv_text.svg" class="svg"></object> 
    </button> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/image-properties']"> 
    <object type="image/svg+xml" data="assets/svg/cv_image.svg" class="svg"></object> 
    </button> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/background-properties']"> 
    <object type="image" data="assets/svg/cv_photo.svg" class="svg"></object> 
    </button> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/background-properties']"> 
    <span class="glyphicon glyphicon-photo svg"></span> 
    </button> 
</div> 

ご覧のとおり、最後のボタンが機能します。最初の3つはありません。最後の1つは、私が最初にそれを持っていた方法です。ここにルータのタイスクリプトファイルがあります：

import { Routes, RouterModule } from "@angular/router"; 

import { EditorTextPropertiesComponent } from "./editor/editor-properties/editor-text-properties/editor-text-properties.component"; 
import { EditorImagePropertiesComponent } from "./editor/editor-properties/editor-image-properties/editor-image-properties.component"; 
import { EditorBackgroundPropertiesComponent } from "./editor/editor-properties/editor-background-properties/editor-background-properties.component"; 

const APP_ROUTES: Routes = [ 
    { path: 'editor/text-properties', component: EditorTextPropertiesComponent }, 
    { path: 'editor/image-properties', component: EditorImagePropertiesComponent }, 
    { path: 'editor/background-properties', component: EditorBackgroundPropertiesComponent } 
]; 

export const routing = RouterModule.forRoot(APP_ROUTES); 

私の古いボタンはまだ正常に動作しているので、ここにエラーはありません。私はuBlock Originから自分のコンソールにエラーが表示されますが、シークレットウィンドウで開くとエラーは消えてしまい、まだ動作しないので、それはできません。ここにエラーがあります：

Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_image.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_zoom_out.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_zoom_in.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_text.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_photo.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 

ご協力いただけると助かります。

編集：私はボーダーボタンをクリックすれば動作することを見ました。だから、私のsvg要素は動作しているルータリンクの前にあります。

EDIT2：境界線が働いていることを知っているので、基になるdivが機能していると思ったので、「ポインタイベント：なし」を追加しました。要素に。これはうまくいった！これで要素をクリックします。

Answer 1

私はまた、質問に私の答えを編集した：

をので、私は国境に私のボタンをクリックした場合、それは仕事をしているのを見ました。だから、私のsvg要素は動作しているルータリンクの前にあります。

ボーダーが機能していることを知っているので、私は基礎をなすdivが働いていると思ったので、 "pointer-events：none;"を追加しました。要素に。これはうまくいった！これで要素をクリックします。