如何在Angular 4中更新SVG元素属性？

我使用4.4.4版本的Angular。在我的

app.component.html

中，我有以下代码

<button class="btn btn-primary" (click)="updatePosition()">Up</button>
    <svg id="svg">
        <image xlink:href="../assets/map.png" x="0" y="0" height="420px" width="420px"/>
    </svg>

Up

我想在按下按钮时动态更新

x

和

y

值。我尝试了各种方法去做，但没有结果

例如，我使用属性绑定

[style.x.px]=“variableX”

来定义

x

位置，但尽管按下按钮并更新variableX值，但没有发生任何事情，因此看起来我仍然必须更新

x

位置。通常情况下，我会使用简单的javascript来定位该图像，并对其执行

el.setAttribute（'x'，value）

，但在angular中，它并没有那么简单，或者只是因为某种原因无法工作

---

有人能帮忙吗？：）

如果您只是想要一种方法来操纵图像的x和y css属性，我可以使用以下任一方法：

指令动态获取您想要的任何值，如下所示：

<button class="btn btn-primary" (click)="updatePosition()">Up</button>
<image xlink:href="../assets/map.png" height="420px" width="420px [ngStyle]="style" />

position = { 'x': '0', 'y': '0' };
//you can also add any other css properties to this like width and height
get style() {
  return this.position;
}
updatePosition() {
  this.position = { 'x': '10px', 'y': '10px' }; //however you update the values
}

如果执行此操作，请确保从“@angular/core”导入

ViewChild

---

我没有在plunkr或任何东西中测试过这一点，但我相信它们都应该可以工作。

如果您只是想找到一种方法来操作图像的x和y css属性，我会使用以下任一方法：

指令动态获取您想要的任何值，如下所示：

<button class="btn btn-primary" (click)="updatePosition()">Up</button>
<image xlink:href="../assets/map.png" height="420px" width="420px [ngStyle]="style" />

position = { 'x': '0', 'y': '0' };
//you can also add any other css properties to this like width and height
get style() {
  return this.position;
}
updatePosition() {
  this.position = { 'x': '10px', 'y': '10px' }; //however you update the values
}

如果执行此操作，请确保从“@angular/core”导入

ViewChild

---

我还没有在plunkr或任何东西中测试过这一点，但我认为它们都应该工作。

为了绑定angular 2中的SVG元素属性，必须在它们前面加上attr.，e。g、 :

<svg>  
    <circle [attr.r]="myRadius" cx="50" cy="50"></circle>  
</svg>

---

这是一个很好的博客，解释了Angular 2中svg绑定的问题：

为了绑定Angular 2中的svg元素属性，必须在它们前面加上attr.，e。g、 :

<svg>  
    <circle [attr.r]="myRadius" cx="50" cy="50"></circle>  
</svg>

---

这是一个很好的博客，解释了Angular 2中svg绑定的问题：

属性绑定不起作用，因为它只设置它的初始值。它不会检查它是否有变化。您是否尝试过使用双向绑定？我可能会，但我会寻求更好的解决方案来访问此元素。我将不得不对它执行一些更复杂的操作。

[style.]

绑定设置进入

样式

绑定的值

x.px

不是有效的css属性，因此它不起任何作用。您是否尝试过绑定到

[attr.x]

（例如

[attr.x]=“variableX”

）？属性绑定不起作用，因为它只设置它的初始值。它不会检查它是否有变化。您是否尝试过使用双向绑定？我可能会，但我会寻求更好的解决方案来访问此元素。我将不得不对它执行一些更复杂的操作。

[style.]

绑定设置进入

样式

绑定的值

x.px

不是有效的css属性，因此它不起任何作用。您是否尝试过绑定到

[attr.x]

（例如

[attr.x]=“variableX”

）？当然，但这并不能解决问题。这与我上面描述的方法完全相同。当然，但这并不能解决问题。这和我上面描述的完全一样，我想它解决了我的问题。我将使用你的方法来改进我的脚本。但是，您能解释一下“get style（）”行是如何工作的吗？它会自动更新元素比例吗？

get style（）

是一个get访问器。它与任何常规函数基本相同，只是get访问器必须返回一些值。这就是为什么，当您在html的

ngStyle

指令中使用它时，您会使用

[ngStyle]=“style”

而不是

[ngStyle]=“style（）”

。因为get访问器必须返回一个值，所以调用它时不带括号，它的“值”是它返回的任何值。因为get访问器本质上是一个函数，所以将它与

[ngStyle]

指令放在一起可以“监视”它返回的值。我认为它解决了我的问题。我将使用你的方法来改进我的脚本。但是，您能解释一下“get style（）”行是如何工作的吗？它会自动更新元素比例吗？

get style（）

是一个get访问器。它与任何常规函数基本相同，只是get访问器必须返回一些值。这就是为什么，当您在html的

ngStyle

指令中使用它时，您会使用

[ngStyle]=“style”

而不是

[ngStyle]=“style（）”

。因为get访问器必须返回一个值，所以调用它时不带括号，它的“值”是它返回的任何值。因为get访问器本质上是一个函数，所以将它与

[ngStyle]

指令放在一起可以“监视”它返回的值。