The path id is referenced inside the textPath element through the xlink:href attribute. I’ll explain the values in the path momentarily.
Next I created a linear path and gave the path an id of text-path. In this first example I created an SVG element, defined the width and height of the viewport and then styled it.
#BOXY SVG TEXT ON PATH HOW TO#
If you need a reminder for how to work with paths, I’ll refer you to a couple of posts from one of my previous SVG series. Note: SVG 2.0 is dropping the xlink: and will simply use href to refer to the path. To refer to the path you’ll use an xlink:href attribute on the. To create SVG text that follows a path you use a element in combination with a path you define inside tags. Today I’ll show you how to work with SVG text along straight line paths that change direction and next week I’ll show you how to create SVG text along any curved path you can imagine. Until now the text has always been located along a default straight line. One thing we haven’t changed so far is the path on which the text is laid out. We’ve covered a lot so far in this series on SVG text. This opens up many possibilities for displaying text. In addition to laying out text in a straight line SVG includes the ability to have text laid out along any path you create.
0 kommentar(er)
