2角度：支配SVG画像/アイコンのCSSスタイルを動的UI

Question

上のユーザ入力/イベントを通じ、私は角2

1で動的にSVG画像のCSSスタイルを制御するためのjQueryを使用します。コントロールをマウスホバーのようなイベントを使用して

<svg 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 175.7 177" style="enable-background:new 0 0 175.7 177;" xml:space="preserve"> 

<style type="text/css"> 
.st0{ 
    fill:#FFFFFF; 
    stroke:#000000; 
    stroke-width:4; 
    stroke-miterlimit:10; 
} 
</style> 
<circle id="XMLID_1_" class="st0" cx="91.2" cy="87.2" r="10" (mouseover)="func1()"/> 

すぐTHIを定義：以下

円ホバリングに「関数func1」をトリガする最初の定義されたスタイルと円上のマウスオーバーイベントに単純な円.SVG画像のサンプルコードでありますjQueryを使用して変更したいスタイルを持つ対応するコンポーネント（.tsファイル）内のfunc1（）関数。

func1(){ 
    console.log("func1 has been called!"); 
    $(".st0").css({"stroke":"yellow", "fill": "blue"}); 
} 

他のイベントも（「クリック」のように）調べてみてください。あなたは動的バインディングを使用する必要があり、フォーム入力を使用してSVGのスタイルを変更したい場合は、フォーム入力

を取ることによって

2.コントロール。テンプレートの サンプル（前のSVGコードとともに）追加コード：

<form> 
    Stroke<input type="text" name="stroke" [(ngModel)]="stroke"> 
    Fill<input type="text" name="fill" [(ngModel)]="fill"> 
    <button (click)="submit()">Submit</button> 
</form> 

コード成分（.TSファイル）対応で添加する必要があります

stroke:any; 
fill:any; 

submit(){ 
    console.log("submit called!"+ this.stroke+" and "+ this.fill); 
    $(".st0").css({"stroke":this.stroke, "fill": this.fill}); 
} 

Answer 1

だけngStyle指令

を使用

<circle [ngStyle]="{stroke:stroke, fill: fill}" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"  
    (mouseover)="func1()"/> 

ngStyleの指示文を使用してください。

<circle [style.stroke]="stroke" 
     [style.fill]="fill" 
    id="XMLID_1_" 
    class="st0" cx="91.2" cy="87.2" r="10"  
    (mouseover)="func1()"/> 

Angular2でjQueryを使用しないようにしてください。