STAFF BLOGAPRICOT STAFFスタッフ別/スタッフブログ

2017.05.11

SVGを使ってみた!

0

今回はHTML5で使えるsvgを使ってみます。

簡単にsvgは何かと聞かれれば、XMLで図形などを描画出来る機能とでも言うのでしょうか。
詳細はネット等で調べて頂ければ良いかと思います。

まずは以下をご覧ください。
参考画像
曲線の上に文字書かれてます。
これはsvgで描いた曲線のpathの上にテキストを表示したものです。
曲線のカーブが変われば、それに合わせてテキストも移動します。

特に今のところ使う場面がないので利用していませんが、曲線に沿って文字書いたり、工夫次第で楽しそうです。

下記のリンクから簡単ではありますが、テキストの変更と、文字の開始位置のみ変更できるページ用意しました。
クリック!

文字数は20文字、位置は0~500まで対応してます。
位置の数字を変えることで、テキストの開始位置が変わります!
その他にもpathや色などなど変えられるのですが、今回はシンプル版です。

では。

記事が気に入ったら「いいね」してね。(SNSとは連動してません)
0

営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

[長野オフィス-本社-]
〒381-2246
長野県長野市丹波島1-805

[東京ブランチ]
〒100-0004
東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

[松本ブランチ]
〒390-0851
長野県松本市大字島内4619-3 QuintetDoor 1階南室

[金沢ベース]
〒920-0831
石川県金沢市東山1丁目10-1 103