|
In our previous posts, we’ve used SVG to create shapes. In this post, as the title said, we will look into creating Text with SVG. There are a lot of things we can do with text beyond what plain HTML text is capable of doing.
So, let’s check them out. Recommended Reading: A Look into Scalable Vector Graphic Basic ImplementationBut, before we go further, let’s see how Text in SVG is formed at its very basic level:
The text in SVG, as you can see from the above code snippet, is defined with a sufficiently logical tag,
Image source: Wikipedia.org And here is how the text will look like. For now it seems it has no difference with regular text in HTML.
Basic Text Styles Text can also be styled with CSS properties such as Bold
Italic
Underline
<tspan> ElementIn some cases, when we only want to apply styles or attributes to particular portion of the Text, we can use
Writing ModeText is not only written from left-to-right. In other parts of the world, Japan for example, the text is written from top-to-bottom. In SVG, this can be done by using the
In the example above, we have put several random Japanese characters (don’t ask me their meaning, I really have no idea) and change the orientation with this style declaration,
Text Outline Text in SVG is basically a graphic, so we can also apply the
In the above code snippet, we have added the
Text PathIn SVG, the Text is not only able to be displayed horizontally and vertically, but it can also follow a Path pattern. Here is how to do it. First, we need to define the Path. However, creating a Path directly in HTML is not that intuitive, we need to understand coordinates and some commands which I’m sure most of us will try to avoid. So, to make this step simpler, I personally suggest to just open up a vector editor (Inkscape or Illustrator), create a path, and generate the SVG code.
Then, put the
Notice that we have also added an
Further reading: SVG Paths Text GradientAdding a background to fill the Text is also possibile in SVG, and if you have succeeded in the Text Path section above, this would be much easier. First, we need to define the gradient colors.
When all the necessary definitions are set up, now we only need to add the text and refer the
And here it is, the text with gradient.
Further reading: SVG Gradient and Pattern Further ReferencesText in SVG is undoubtedly powerful, there are actually many things we are able to do beyond what we can accomodate in this post. So, below we have put together a few more references to serve your interest in this subject.
|
|
|
来自： greenyun588 > 《待分类1》
