CODEWITHSUNDEEP
javascriptsvgsnap.svg
drdla
drdla

Reputation: 121

Can not set startOffset attribute on textpath with Snap.svg

I am trying to render text in the middle of an arc with Snap.svg.

This is possible with SVG like this:

<defs>
    <path id="path1" d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"/>
</defs>
<text text-anchor="middle">    
    <textPath xlink:href="#path1" startOffset="50%">
        Text on a curved path
    </textPath>
</text>

What I get is this (please ignore the specific coordinates):

<path d="M 352.5 14.1 A 338.4 338.4 0 0 1 645.5 183.3" id="path1"></path>
<text x="0" y="0" style="text-anchor: middle;">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1">
        Lorem Ipsum
    </textPath>
</text>

when I do this in Snap.svg:

var labelArc = paper
               .path('M 352.5 14.1 A 338.4 338.4 0 0 1 645.5 183.3')
               .attr('startOffset': '50%'});

paper
.text(0, 0, 'Lorem Ipsum')
.attr({
    'text-anchor'   : 'middle',
    'textpath'      : labelArc
});

The problem is that the startOffset attribute is not passed to the textpath. Setting this attribute via CSS did not work either.

Am I doing something wrong or does it require some fancy workaround?

Upvotes: 1

Views: 789

Answers (1)

drdla
drdla

Reputation: 121

Ok, I figured out a way to do it...

Simply assign the text to a variable and set startOffset like so:

var label = paper
            .text(0, 0, 'Lorem Ipsum')
            .attr({
                'text-anchor'   : 'middle',
                'textpath'      : labelArc
            });
label.textPath.attr({ startOffset: '50%' });

There might be a more elegant way of doing it, but this is at least working.

Upvotes: 4

Related Questions