CODEWITHSUNDEEP
svgdata-bindingangular
fjozsef
fjozsef

Reputation: 135

Angular2 Svg Text attribute binding

I want to create an svg dynamically in Angular 2.

I have several attributes to add like x, y, text-anchor, font-size, font-family and fill, but only the font-size works for me. The fill doesn't want to work with [ ] around.

<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

How can I bind to the attributes listed above?

Upvotes: 3

Views: 3717

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Have hardcoded value in string format, otherwise angular will look into the component for the variable with that name for updating binding. Also you should specify fill property value as #777 instead of #777777. You would be needed #777777 when you are running application on IE browser.

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

Keep in mind each attribute binding inside [] sign, you missed the same for attr.fill

Demo Here

Upvotes: 3

Related Questions