SVG で動的な幅のストロークを作成することはできますか? here、here 、またはhereのようなカリグラフィーの外観を実現したい。
これは可能ですか?SVG でのストロークのカスタマイズはかなり制限されているようです。ストロークのグラデーションでさえ自明ではないようです (こちらを参照)。
SVG 標準にメカニズムを追加するという提案があり、それはまさにあなたが望むことを行います:
ここで利用可能な実装例さえあります:
ただし、これは決して公式なものではなく、今後もそうなるという確証はありません。
それまでは、ベジエ曲線とオブジェクトの塗りつぶしに固執する必要があります。
カリグラフィ フォントを使用することもできます。たとえば、Tangerine はGoogle CDNで入手できます。
このアプローチでは、最初からすべてを描画する必要がないため、作業が少なくて済みますが、サードパーティのフォントを使用すると、最終結果をほとんど制御できなくなります。
パス要素のストロークを動的に調整することはできません。ただし、パスを描画し、ストロークの代わりに塗りつぶしの色を使用してから、元の線から少し離れた位置で文字を重ねることができます。
また、Web 上で SVG を使用している場合は、テキスト要素に CSS フォントを使用できます。無料で使用できる非常に優れた筆記体フォントがいくつかあります。Google Web フォントを確認してください。