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

Angular2 Svg Text属性绑定

1 个答案: