Applying attribute to SVG using JS prompts 'this.textBox.style is undefined'. Why?

Question

Hi,

I'm using the following code to draw an SVG text box, and then change its text anchor attribute to 'left' as it defaults to center and that's nasty.

The text generates correctly, but when I add this second line I get the error 'this.textBox.style is undefined' in my error console.

Here's my code:

    RenderTextBox:function()
{
    // Render Text
    this.textBox = paper.text(this.x, this.y, this.htmlText);
    this.textBox.style.textAnchor="left";
}

Any ideas?

Answer 1

I think what you want to do is

this.textBox.setAttribute('text-anchor', 'start');

(or, since it looks like you're using Raphael)

this.textBox.attr( 'text-anchor', 'start' );

The valid values for text-anchor are start, middle, end, and inherit