CODEWITHSUNDEEP
javascripthtmlcsssvg
samuel
samuel

Reputation: 487

get SVG path if doesn't exist

I'm trying to learn svg to do something like that : https://css-tricks.com/svg-line-animation-works/ but with text SVG.

I make this to have a SVG Hello :

<svg id="SVGHello">
    <text x="0" y="40vh">Hello</text>
</svg>

but I don't have any path part in my html, so I can't make something like that :

var path = document.querySelector('.path');
var length = path.getTotalLength();

There is an other solution to get the path length?

Upvotes: 0

Views: 440

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You must have a shape element (usually a <path>) in order to use that line animation effect.

To create the path, use a vector editor, add your text, and then convert it to a path.

Almost any vector editor should work. There are free ones you can use, such as Inkscape.

Upvotes: 1

sebasaenz
sebasaenz

Reputation: 1956

You have to define a path for your text for it to work. And after defining it you should link the text to the path.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 728 400">
<defs>
  <path id="path" 
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</defs>
<text font-family="monospace" font-size="20" fill="#1d1f20">
  <textPath id="text" xlink:href="#path">Hello</textPath>
</text>
</svg>

Also, regarding the link you shared, it says that the path should have a stroke. I suggest you to have a look at this codepen.

Upvotes: 0

Δ O
Δ O

Reputation: 3710

No, you can't get an attribute of an element which doesn't exist.

Upvotes: 0

Related Questions