Angular2 Svg 文本属性绑定

Question

我想在 Angular 2 中动态创建一个 svg。

我有几个属性要添加，例如 x、y、text-anchor、font-size、font-family 和 fill，但只有 font-size 适合我。填充不想与 [ ] 一起使用。

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
     <svg:text
            [attr.x]="0"
            [attr.y]="100"
            [attr.text-anchor]="start"
            [attr.font-size]="29"
            [attr.font-family]="Helvetica"
            attr.fill="#77777">
                <tspan
                    x="0"
                    dy="0">Random Text</tspan>
    </svg:text>
 </svg>

Plunker：http://plnkr.co/edit/D0eyyW9flV92rmoh8o85

如何绑定到上面列出的属性？

Answer 1

具有string 格式的硬编码值，否则 Angular 将在组件中查找具有该名称的变量以更新绑定。您还应该将fill 属性值指定为#777 而不是#777777。在 IE 浏览器上运行应用程序时需要#777777。

 <svg:text
        [attr.x]="0"
        [attr.y]="100"
        [attr.text-anchor]="start"
        [attr.font-size]="29"
        [attr.font-family]="'Helvetica'"
        [attr.fill]="'#777'">
            <tspan
                x="0"
                dy="0">Random Text</tspan>
</svg:text>

请记住 [] 符号内的每个属性绑定，attr.fill 的每个属性绑定都一样

Demo Here