当前位置: 首页 > 知识库问答 >
问题:

在SVG结合Angular2值线性渐变停止o

孔嘉茂
2023-03-14

我想用绑定在linear-gradi angular2值

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

<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>

它给了我错误。我想添加带有动态值的渐变线。请帮忙。

@Gaunter我更新/编辑你的代码

共有1个答案

宗乐池
2023-03-14

我猜这就是你想要的:

      <stop [attr.offset]="goodScore" stop-color="blue"/>
      <stop [attr.offset]="dangerScore" stop-color="red"/>

您需要 [attrname]=“fieldName”attrname=“{{fieldName}}” 才能获得 Angular2 绑定。
SVG 元素没有属性,因此您需要执行属性绑定,因此需要使用附加的 attr. 前缀来绑定到 SVG 元素。

 类似资料:
  • SVG 渐变 渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。 SVG渐变主要有两种类型: Linear Radial SVG 线性渐变 - <linearGradient> <linearGradient>元素用于定义线性渐变。 <linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐

  • SVG 渐变 和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变。渐变方式有两种:线性和径向。 SVG 线性渐变 - linearGradient <linearGradient> 元素用来定义一个线性渐变。 <linearGradient> 元素必须被包含在一个 <defs> 标签中。如前面所述,<defs> 标签用来包含特殊元素(如滤镜

  • SVG 放射性渐变 - <radialGradient> <radialGradient>元素用于定义放射性渐变。 <radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。 实例 1 定义一个放射性渐变从白色到蓝色椭圆: 下面是SVG代码:<svg xmlns="http://www.w3.org/20

  • 描述 (Description) svg-gradient是一种颜色到另一种颜色的过渡。 它可以为同一个元素添加许多颜色。 它至少包含三个参数 - 第一个参数标识渐变类型和方向。 其他参数列出其位置和颜色。 在第一个和最后一个位置指定的颜色是可选的。 可以设置方向 - 从中​​心到底部,右边,右下角,右上角,椭圆或椭圆。 参数 - 颜色在列表中停止 - list - 列出所有颜色及其位置。 esc

  • 问题内容: 升级到FontAwesome 5后,我无法为FontAwesome的svg上色。 如果它像这里一样工作,应该很棒:(注意:他使用了FontAwesome 4)。 问题答案: 图标不再从字体中引用为字形,而是作为嵌入式SVG注入。图标的内容颜色定义为。 设置背景并使用的技术不再起作用。相反,您可以直接设置属性。不幸的是,由于不支持渐变,这会给您带来麻烦。如果使用SVG渐变定义,则可以设置

  • 问题内容: 以下代码的Opera和IE替代品是什么? 注意 ,我已经测试了以下规则。所有浏览器都支持它们。但是它们是垂直渐变。谁能帮我将它们修改为水平的? 问题答案: background-image: -ms-linear-gradient(right, #0c93C0, #FFF); background-image: -o-linear-gradient(right, #0c93C0, #F