Because x and y are absolute positions, these values place SVG 2 just to the right of the left edge of the viewport and also about halfway above and below the top edge. I moved the second tspan to a position (10,10). So we can tell the two tspans apart I added numbers to the text. Let’s change the position of the second tspan by setting its x and y coordinates. Things get interesting once you know that the same attributes that are available to you on the element are also available on the element. The text in the tspans displays inline one after the other, which is how they would have displayed directly inside the text element with a space between them. I positioned a text element at (240,120) and inside created two tspans, each containing the text “SVG” inside. I also bumped up the font-size a bit and set the overflow to visible so we can see any text that displays outside of the viewport. I created an element, defined the dimensions of the SVG viewport and added a red outline so we can see its boundaries. Hopefully most of the code here is familiar to you after reading the previous two posts in this series. You can wrap part or all of you SVG text inside a to give you greater control over its display and to position different lines or snippets of text relative to each other. You can think of the element as a span for SVG text. Today and next week I want to talk about two more SVG elements that you’ll use in combination with the element. The element isn’t the only element we can work with when working with SVG text, however. The last couple of weeks we’ve been looking at the SVG text element and exploring what we can do to text using the different attributes available to us. The SVG text element allows you to easily position and style text, but what do you do if you want to position and style different parts of the text differently? Do you need to create multiple text elements? Nope.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |