文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 吹き出しのデザイン > SVGで吹き出しを描く

SVGで吹き出しを描く

画像を使用せずに、SVGを使用して吹き出しを作成することができます。

当ページでは、簡単な操作で吹き出しの形や色を指定し、SVGを自動で作成できます。

CSSのみで吹き出しを作成する場合は、以下を参照ください。
CSSのみで吹き出しを作成

吹き出しを作成してみよう

作成されるSVGは、吹き出し口の位置や大きさは固定のため、必要に応じて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">SVGで描く</text></svg><!-- textで文字の開始位置、中央基点を指定 -->
ページTOP
広告
広告

注意事項

<svg>で図形を描く方法は、上記以外にも多数あります。上記は、あくまでも一例です。特に、曲線を描く方法はいろいろありますので、最適な方法を選択してください。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン