当前位置：网站首页>How to use SVG to make text effects arranged along any path

How to use SVG to make text effects arranged along any path

2022-07-19 10:37:00 【InfoQ】

Preface

I remember there was a time when the compass clock was very hot , The big ice also wrote a compass clock

demo

, Among them, the circular text big ice block uses

transform

To make . In the process of making , Big ice found using pure

css

The effect of arranging text along the specified path is particularly complicated , If the path changes , It needs to be changed a lot

css

Attributes to adapt to path changes .

At this time ,

SVG

The advantages of the new technology are highlighted , because

SVG

Native support for text arranged in any path , It's not just a ring , And triangles 、 Parallelogram and any other fancy shape path can support .

So today, , Let's review with the big ice

use

SVG

Generate text along any path

The question of ~

`SVG`

Basic knowledge of

What is?

`SVG`

SVG
Refers to scalable vector graphics (Scalable Vector Graphics), In the case of enlarging or changing the size, the graphic quality will not be lost .
SVG
Use
XML
Format definition drawing , Used to define vector based graphics for networks .
SVG
Is the standard of the World Wide Web Alliance , And
DOM
and
XSL
And so on.
W3C
Standards are a whole .

<path> Path elements

<path>
Elements are general elements used to define shapes , Theoretically , We can use
<path>
Element to define any path .

Let's take a look

<path>

Some basic operations of element ：

M： Move the pen to the specified point x,y Instead of drawing .

a： From current point to point x,y Draw an elliptical arc .

z： Close the path by drawing a line from the current point to the first point .

`viewBox`

attribute

viewBox（ View box ）
Property is used to define
<svg>
The amount of space taken up . Two coordinates define the user coordinates of the upper left corner of the element , The last two coordinates define the user coordinates in the lower right corner .
<svg>
The amount of space occupied is
ViewBox
The space from the top left to the bottom right .

If we give

SVG

Set up

width:500px; height:500px; viewBox="0 0 50 20"

under these circumstances ,

View box (ViewBox)

from (0,0) Start at , also 100 wide ,100 high . in other words ,500 x 500 Pixel

<svg>

Elements , Use internally from (0,0) To (100,100) The coordinate system of , It's divided into two parts 100*100 A cell . So at the moment

SVG

Each in shape coordinates 1 The corresponding width is ：500/100 = 5 Pixels , The height is ：500/100 = 5 Pixels .

If we give this at this point

SVG

Internal element setting

x="10" y="10" width="20" height="20"

, Represents the distance between the elements

SVG

Above the element

50px

, On the left

50px

, Wide for

100px

, So is Gao

100px

I have mastered the above knowledge , Let's try to use path Draw a circular path ：

<style>
 .box {
 width: 200px;
 height: 200px;
 }
</style>

<div class=&quot;box&quot;>
 <svg viewBox=&quot;0 0 100 100&quot;>
 <path d=&quot;M0, 50 a50, 50 0 1, 1 0, 1z&quot;></path>
 </svg>
<div>

As shown in the figure below ：

Use

`<textPath>`

Let the text follow the path

<textpath>
Element is used along the path （ for example , circular ） Arrange text .
<text>
The element is used in
SVG
Drawing text in an image .

We can use a

<textPath>

Element to wrap the text , And pass

xlink:href="#xxx"

Property to link it to the

ID

xxx

<path>

The element that defines the path . The style of the font can be inherited from the outer elements , So you don't have to style the text separately . And then we're going to take

<textPath>

Put it in

<text>

In the elements :

<style>
 body {
 background-color: #b0b0b0;
 }

 .box {
 width: 200px;
 height: 200px;
 margin: 50px;
 background-color: #fff;
 }
</style>

<div class=&quot;box&quot;>
 <svg viewBox=&quot;0 0 100 100&quot;>
 <path d=&quot;M0,50 a50,50 0 1,1 0,1z&quot; id=&quot;circle&quot; ></path>
 <text>
 <textPath xlink:href=&quot;#circle&quot;> This is the circular text generated around the path ~</textPath>
 </text>
 </svg>
<div>

As shown in the figure below ：

Two problems can be seen from the picture above ：

1, The circular path is filled with default black .

2,
SVG
Actual width and height inherited from
.box
The box , Width and height
200px
, The overflow part of the text is hidden .

The solution is as follows ：

1, We can
<path>
Elemental fill Set to
fill: none;
, such , The background of the circular path is transparent .

2, to
SVG
Set up
overflow: visible;
, such , beyond
SVG
Part of the text will not be hidden .

increase

css

The code is as follows ：

.box svg {
 overflow: visible;
}
.box path { 
 fill: none; 
}

As shown in the figure below ：

perfect ！

Create text effects along any path

With the above experience , We put

<path>

Adjust the path of the element , You can use

SVG Online editor

To make path route . Then we add a color gradient to the text , Try to adjust the spacing ：

 <style>
 .box {
 width: 200px;
 height: 200px;
 margin: 50px;
 font-size: 12px;
 letter-spacing: 2px;
 }
 .box svg {
 overflow: visible;
 }
 .box path { 
 fill: none; 
 }
 </style>
 <div class=&quot;box&quot;>
 <svg viewBox=&quot;0 0 100 100&quot;>
 <path d=&quot;m36.04045,45.99612c0.72238,0 18.78177,-17.27891 34.67404,-2.30385c15.89227,14.97505 -2.06122,51.71385 -33.12338,49.40999c-31.06217,-2.30385 -51.39459,-47.6821 -23.94431,-74.17643c27.45028,-26.49433 76.46594,-21.1417 90.427,-2.34993c13.96106,18.79177 9.22214,37.08444 7.59483,52.18238c-1.62731,15.09794 5.01952,28.13002 23.57052,28.88256c18.551,0.75254 68.69884,1.13642 61.38299,-46.48421&quot; fill-opacity=&quot;null&quot; id=&quot;circle&quot; ></path>
 <linearGradient id=&quot;myLinearGradient&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;0%&quot;>
 <stop offset=&quot;0%&quot; stop-color=&quot;red&quot;></stop>
 <stop offset=&quot;15%&quot; stop-color=&quot;orange&quot;></stop>
 <stop offset=&quot;30%&quot; stop-color=&quot;yellow&quot;></stop>
 <stop offset=&quot;45%&quot; stop-color=&quot;green&quot;></stop>
 <stop offset=&quot;60%&quot; stop-color=&quot;cyan&quot;></stop>
 <stop offset=&quot;80%&quot; stop-color=&quot;blue&quot;></stop>
 <stop offset=&quot;100%&quot; stop-color=&quot;purple&quot;></stop>
 </linearGradient>
 <text fill=&quot;url(#myLinearGradient)&quot;>
 <textPath xlink:href=&quot;#circle&quot;> How to use SVG Create text effects along any path ~ Let's review with the big ice ~</textPath>
 </text>
 </svg>
 </div>

As shown in the figure below ：

Production complete ！ Isn't that easy ？ It's easy to master another little knowledge ~

Postscript

SVG

It's not much , It takes one day to basically understand all of them , except

<path> Elements

It's too complicated to draw , Other elements and attributes are relatively easy to accept . We don't have to go out of our way to understand

SVG

<path> Elements

The mysterious charm of grammar , Anyway, even if you learn it, you will forget it in a few minutes 【 Manual formation 】. It's useful to learn how to arrange the text according to the path , After all, this style is also used in design drawings ~

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207171232218939.html