This is the third day of my participation in the More text Challenge. For details, see more text Challenge
preface
Remember there was a period of time before the compass clock is particularly hot, big ice also followed the wind to write a compass clock demo, in which the circular text big ice used transform to make. During the process, Ice found that using pure CSS to arrange the text along a given path was particularly complicated. If the path changed, many CSS properties had to be changed to accommodate the path change.
This is where SVG’s advantage comes into focus, because SVG natively supports text arranged in arbitrary paths, not just rings, but also fancy shape paths like triangles and parallelograms.
So today, let’s review the problem of generating text along arbitrary paths in SVG with ice Cube
SVGBasic knowledge of
What is theSVG
SVGScalable Vector Graphics, which can be scaled up or resized without loss of quality.SVGuseXMLFormat defines graphics that define vector-based graphics for use in the network.SVGIs the World Wide Web Consortium standard, with such asDOM和XSLSuch asW3CStandards are a whole.
Path element
The
element is a generic element used to define shapes. In theory, we can use the element to define any path.
Let’s look at some basic operations on the
- M: Move the pen to the specified point x, y without drawing.
- A: Draw an elliptical arc from the current point to points X, y.
- Z: Closes the path by drawing a line from the current point to the first point.
viewBoxattribute
The viewBox property is used to define the size of < SVG >. The two coordinates define the user coordinates for the upper-left corner of the element, and the last two coordinates define the user coordinates for the lower-right corner.
< span style = “box-sizing: border-box; color: RGB (93, 93, 93); font-size: 14px! Important; white-space: inherit! Important;”
If we set width:500px for SVG; height:500px; In this case, the viewBox starts at (0,0) and is 100 wide and 100 high. That is, a 500 x 500 pixel < SVG > element, internally using coordinates from (0,0) to (100,100), is divided into 100*100 cells. So each unit in the current SVG shape coordinates corresponds to a width of 500/100 = 5 pixels and a height of 500/100 = 5 pixels.
If we set x=”10″, y=”10″, width=”20″, height=”20″, then this element is 50px above and 50px to the left of the SVG element, with a width of 100px and a height of 100px.
With that in mind, let’s try drawing a circular path with path:
<style>
.box {
width: 200px;
height: 200px;
}
</style>
<div class="box">
<svg viewBox="0 0 100 100">
<path d="M0, 50 a50, 50 0 1, 1 0, 1z"></path>
</svg>
<div>
Copy the codeAs shown in the figure below:
use<textPath>Arrange the text along the path
The < textPath > element is used to arrange text along a path (for example, a circle). The
element is used to draw text in an SVG image.
We can wrap this text around a
element and link it to the
in the
element:
<style>
body {
background-color: #b0b0b0;
}
.box {
width: 200px;
height: 200px;
margin: 50px;
background-color: #fff;
}
</style>
<div class="box">
<svg viewBox="0 0 100 100">
<path d="M0,50 a50,50 0 1,1 0,1z" id="circle" ></path>
<text>
<textPath xlink:href="#circle">This is the circular text ~ generated around the path</textPath>
</text>
</svg>
<div>
Copy the codeAs shown in the figure below:
Two problems can be seen from the picture above:
- 1. The circular path is filled with the default black color.
- 2,
SVGThe actual width and height are inherited from.boxThe box, width and height are200px, and the text overflow is hidden.
The solution is as follows:
- 1, we can take
<path>The element’s fill is set tofill: none;Thus, the background of the circular path is transparent. - 2, give
SVGSet up theoverflow: visible;In this way, beyondSVGParts of the text will not be hidden.
Add CSS as follows:
.box svg {
overflow: visible;
}
.box path {
fill: none;
}
Copy the codeAs shown in the figure below:
Perfect!
Creates a text effect arranged along any path
With this experience in mind, let’s tweak the path of the
<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="box">
<svg viewBox="0 0 100 100">
<path d="M36.04045, 45.99612 c0.72238, 0, 18.78177, 17.27891, 34.67404-2.30385 c15.89227, 14.97505-2.06122, 51.71385 C - 31.06217-33.12338, 49.40999, 2.30385, 51.39459, 47.6821-23.94431, 74.17643 c27.45028, 26.49433 76.46594, 21.1417 C13.96106 90.427, 2.34993, 18.79177, 9.22214, 37.08444, 7.59483, 52.18238 c - 1.62731, 15.09794, 5.01952, 28.13002 23.57052, 28.88256 c18.551, 0.75254, 68.69884, 1.13642, 61.38299, 46.48421," fill-opacity="null" id="circle" ></path>
<linearGradient id="myLinearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red"></stop>
<stop offset="15%" stop-color="orange"></stop>
<stop offset="30%" stop-color="yellow"></stop>
<stop offset="45%" stop-color="green"></stop>
<stop offset="60%" stop-color="cyan"></stop>
<stop offset="80%" stop-color="blue"></stop>
<stop offset="100%" stop-color="purple"></stop>
</linearGradient>
<text fill="url(#myLinearGradient)">
<textPath xlink:href="#circle">How to use SVG to create text effects that follow arbitrary paths</textPath>
</text>
</svg>
</div>
Copy the codeAs shown in the figure below:
Done! Isn’t that easy? Easy to grasp a small knowledge ~
Afterword.
The content of SVG is not much, it can be understood in a day, except that the drawing of the
PS: today is the third day to participate in the more text challenge, I did not save draft, write a basic blog at least half a day, can not help but laugh at their slow ah.
Although not many people see it, but also to their own drainage ~ more challenging article catalog is as follows:
- Flex layout container elements and project elements attributes
- 2021.06.02 how to play with CSS Gradient Background