is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
Related
I am using leaflet 1.7.1 and I need to put custom markers on map.
I am currently using circles (as in: L.circle([lat, lon], {radius: rad}).addTo(map);) as my markers (note radius is significant and should be in meters).
Now I need to add a "direction" to this circle essentially displaying something like:
I actually need to implement some L.directedCircle([lat, lon], {radius: rad, heading=45}).addTo(map);, but I don't know how to do that.
I also tried looking for plugins, but nothing seems to do what I need.
Note that the image above is just an example, I'm open to other options but that seems very simple (it's just a 4-points SVG poliline) and effective.
If that matters I'm using leaflet through pyqtlet2, but I'm prepared to "get my hands dirty" using directly javascript.
Any help appreciated.
As described in another post, I am trying to recreate an SVG from vector graphics commands in a PDF and I am facing some difficulty in the part where I need to intersect a set of clip paths. For instance, the raw SVG has a few clip path elements line #16 which need to be intersected and applied on the rectangle fill (line #17) to obtain what looks like this: .
I am not clear about the correct and the best way to achieve intersection of multiple clip paths in an SVG. I wasn't able to find much information about this on the web except this one, going by which I came up with this SVG where I introduce a sequence of additional clipPath elements which try to intersect the current intersection with the next original clipPath to be added to the intersection set. This approach seems rather inelegant to me. Besides, that SVG doesn't seem to work on some versions of Firefox (ESR 17.x) though it renders the expected result on Firefox 5, Chrome and IE. Is there something wrong with the SVG? Or even if it is correct, is there a simpler/better way to achieve the intersection?
The way you've done it seens reasonable. There's a w3c example in the testsuite.
I'm trying to understand how Paperjs works and I would like to know if it's possible to write text vectors, if yes how?
I tried Raphael.js before this, and I was almost satisfied with it but it seems that Paperjs is more (cross)browser compliant for some reasons, right?
Some examples would be nice!
Thanks for your answers.
Yes, it is definitely possible to create texts in paper.js.
var awesometext = new paper.PointText();
awesometext.content='awesome';
paper is better than raphael because its canvas based. Canvas is better supported on mobiles/tabs and hence the advantage of paperjs. However, since canvas is just a bitmap implementation, zooming will make canvas renderings not so good compared to svg renderings like in raphael.
So, it depends on what your priorities are for your application..
Paperjs handles text-scaling well, but it uses canvas' native methods to render the characters, so you can't access the vector data once they're drawn. But I imagine you'd only want vector characters to manipulate their shape, for example, morphing one letter into another, or creating a font editor.
If you just want hi res text then paperjs can do that no problem... or you could just set a bigger font size.
If you want to render text as vectors in paperjs, have a look at https://nodebox.github.io/opentype.js/
I'm trying to make 3 different circles to my website. I don't want to insert it as a graphic/image file. So I've been trying to achieve it using CSS3, but I can't really work my fingers around it.
What will it look like?
I have uploaded a picture of what I'm trying to achieve at: www.sp34k.com/etc/circles.jpg
I can't really show the code I've been trying to use to achieve this, as it all looks totally weird and nothing floats currectly.
What I've tried
What I've tried is to make 3 circles with position absolute and then use % (percentage) to determine the width of the colored parts, but I can't twist my mind around how it should be set up.
Any suggestions is appreciated,
Mike
Here is a simple try of me to achieve the effect you want:
DEMO
edit: css-only solution
It can be easily animated with javascript or keyframes. Arbitrary content would go into the inner div. To change the percentage, simply adjust the angle of the pseudo-elements.
With a little more effort this could be easily refined I guess;)
Note: the transform has the webkit-prefix, so it works only in chrome/safari - to see it in firefox or other browsers, you need to change the prefix.
P.S. I will animate it when I'm home from work.
Good one by Christoph but he is using SASS/SCSS which are comparatively slow then normal CSS because they have to be converted to CSS before browser render it so I have have a different Solution for you
try this fiddle
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.