cman.jpSVGで吹き出しを描く
画像を使用せずに、SVGを使用して吹き出しを作成することができます。
当ページでは、簡単な操作で吹き出しの形や色を指定し、SVGを自動で作成できます。
CSSのみで吹き出しを作成する場合は、以下を参照ください。
CSSのみで吹き出しを作成
吹き出しを作成してみよう
作成されるSVGは、吹き出し口の位置や大きさは固定のため、必要に応じてSVGを変更して使用してください。SVGの指定方法は、以下のページを参照ください。
svgでグラフィックを描く
吹き出しの種類
吹き出しの枠線・文字の色
|
他▶
|
吹き出し口の位置
吹き出しの大きさ
吹き出しの背景色
|
他▶
|
使用したhtml
<svg xmlns=‘http://www.w3.org/2000/svg‘ height=‘60‘ width=‘200‘ viewBox=‘0 0 200 60‘ style=‘fill:#ffff1a;stroke:#999999‘ ><!-- 背景色と枠線を指定 --> <polygon points=‘1,2 160,2 160,48 70,48 80,60 55,48 1,48 1,2‘ ></polygon><!-- polygonで吹き出しを描く --> <text x="80" y="35" text-anchor="middle">ＳＶＧで描く</text></svg><!-- textで文字の開始位置、中央基点を指定 -->
広告
広告
注意事項
<svg>で図形を描く方法は、上記以外にも多数あります。上記は、あくまでも一例です。特に、曲線を描く方法はいろいろありますので、最適な方法を選択してください。
広告
| 生成できるホームページ・パーツ一覧 | |
 文字のデザイン | |
 画像のデザイン | |
 ボタンのデザイン | |
 入力項目のデザイン | |
 テーブルのデザイン | |
 BOXのデザイン | |
 吹き出しのデザイン | |
 ページのデザイン | |
 図形のデザイン | |
| ご利用時の注意事項・制約事項 | |
| よくあるご質問 | |
| 何で無料なの？ | |
| 生成コードに利用制限はある？ | |
| 生成コードに保証はある？ | |
| jQueryで生成できない？ | |
広告
広告
スマートフォン・タブレット | 運営:株式会社シーマン |