![]() ![]() Gosh, SVG is so cool.Īnyways, so I have my clips defined, now I need to add the shapes. This allows me to define a path as a clip, and then later reference the path itself as a regular shape. But I don't want to have the path in the clip path element, and then repeat it as its own path… Well, SVG is Super Very Good™, because I can absolutely do something like this: HTML □ Copy code □ Code copied! The stroke should only be contained inside the shape itself, like… clipped? Ah, a clip path! Use a path, apply a stroke to it, and clip it to itself. Let's take a look (hover to trigger the animation): Easy, right? Animate the stroke-width from 0 to whichever value covers the full shape ( 16 in my case). ![]() I thought it would be cool to have the letters fill in from the sides instead of simply changing the fill colour. The issue is that you can't export an SVG with that feature (well, you can but it will offset the path or convert it to a shape instead): SVG only supports the centre stroke (for now). By default, it's in the centre, shared across both (so a 2px stroke wil have 1px inside the shape, 1px outside), but you can also select either to have it only "outside" or "inside". Users of software like Adobe Illustrator will know that you can determine on which edge the stroke sits.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |