在SVG线性梯度停止偏移中绑定Angular2值? [英] Bind Angular2 values in SVG linear gradient stop offset?
问题描述
我想在线性梯度停止偏移中使用绑定angular2值,但它给了我错误.有人可以告诉我如何在线性渐变的停止偏移量中绑定angular2值,如下所示?
I want to use bind angular2 values in linear-gradient stop offset but its giving me errors. Can someone tell me how can I bind angular2 values in stop offset of linear-gradient as demonstrated below?
test.component.ts
test.component.ts
import {Component, EventEmitter, ViewEncapsulation, Input, OnInit} from '@angular/core';
@Component({
selector: 'test-comp',
templateUrl: 'test-component.html',
encapsulation: ViewEncapsulation.None
})
export class TestComponent implements OnInit {
@Input() name: string;
@Input() flexScore: number;
protected goodScore: number;
protected dangerScore: number;
protected isComplete: boolean = false;
ngOnInit() {
this.goodScore = this.flexScore;
this.dangerScore = 100 - this.goodScore;
console.log(this.goodScore + ' ' + this.dangerScore);
this.isComplete = true;
}
}
test-component.html
test-component.html
<div class="individual-athlete-risk">
<span id="name">{{name}}</span>
<span id="score">{{flexScore}}</span>
</div>
<svg width="200" height="10" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="testGradient">
<stop attr.offset="{{goodScore}}%" stop-color="blue"/>
<stop attr.offset="{{dangerScore}}%" stop-color="red"/>
</linearGradient>
</defs>
<rect fill="url(/test#testGradient)" x="0" y="0" width="200" height="9"/>
</svg>
它给了我错误.我想添加带有动态值的渐变线.请帮忙.
Its giving me errors. I want to add gradient line with dynamic values. Please help.
@Gaunter我已经更新/编辑了您所说的代码,现在已消除了错误,但基于OnInit()函数中确定的值,条形/渐变似乎仍然是恒定的.我已经检查了OnInit中的goodScore和angersScore值,它们是正确的并且不统一.有什么主意吗?
@Gaunter I have updated/edited the code what you said, now the errors removed but still it seems that bar/gradient is constant based on the values determined in OnInit() function. I have checked the goodScore and dangerScore values in OnInit they are correct and not uniform. Any idea?
推荐答案
我想这就是您想要的:
<stop [attr.offset]="goodScore" stop-color="blue"/>
<stop [attr.offset]="dangerScore" stop-color="red"/>
您需要[attrname]="fieldName"
或attrname="{{fieldName}}"
才能获得Angular2绑定.
SVG元素没有属性,因此您需要进行属性绑定,因此需要附加的attr.
前缀来绑定到SVG元素.
You need either [attrname]="fieldName"
or attrname="{{fieldName}}"
to get Angular2 binding.
SVG elements don't have properties, therefore you need to do attribute binding, therefore the additional attr.
prefix for binding to SVG elements.
这篇关于在SVG线性梯度停止偏移中绑定Angular2值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!