jquery - Angular 2 : Controlling SVG Image/Icon Css Styles dynamically through user inputs/events on UI

Question

我在 Angular 2 中使用 Jquery 来动态控制 svg 图像的 Css 样式。

1:使用鼠标悬停等事件进行控制

下面是一个简单的圆形 .svg 图像的示例代码，其中定义了初始样式和圆形上的鼠标悬停事件，该事件将在悬停圆形时触发“func1”:

<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()"/>

现在在其对应的组件(.ts 文件)中定义此函数:func1()，其中包含您要使用 jquery 更改的样式。它看起来像这样:

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

也尝试探索其他事件(例如“点击”)。

<强>2。通过表单输入进行控制

如果您想使用表单输入更改 svg 的样式，您应该使用动态绑定(bind)。 模板中的示例附加代码(以及之前的 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。