どうも！LSSです！！
先日の記事、
が色々と興味を持っていただけたようで^^
カメさん(id:tn198403s)は早々にコードコピペを試していただいた上に、色を変えたり記載順を変えたりして、絵本仕立てにまでなりました！
アーシさん(id:arshii)はググって他のSVG要素も試みておられます。
先を越された！！ｗｗｗ
カメさん、アーシさん、言及ありがとうございます^^
というわけで、LSSも続きをやってみる事にしました！
まず、こないだ作った画像
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
</svg>
ここに、手を加えていきます！
文字を入れてみました
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<text x="20" y="100" style="font-size: 20px;">赤く熱く燃える</text>
</svg>
<text x="20" y="100" style="font-size: 20px;">赤く熱く燃える</text>
という一行を追加してみました。
x="20" y="100"
が、文字を書き始める位置の指定になります。
style="font-size: 20px;"
で文字サイズを決めていますが…これってCSS？？
試しにCSSプロパティを足して…
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<text x="20" y="100" style="font-size: 20px; font-weight: bold;">赤く熱く燃える</text>
</svg>
font-weight: bold;
を追加してみると、文字が太くなりました！
やっぱりstyle=の内容はCSSのようですね^^
こんな風にSVGにCSSが割り込むのかぁ。
線を引いてみる
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<text x="20" y="100" style="font-size: 20px; font-weight: bold;">赤く熱く燃える</text>
<path d="M 50 200 L 250 150" stroke="black" stroke-width="3" fill="none"></path>
</svg>
<path d="M 50 200 L 250 150" stroke="black" stroke-width="3" fill="none"></path>
を追加してみました。
線を引くSVG要素は
<line>…直線
<polyline>…折れ線
などもありますが、ここでは<path>を使ってみます^^
d="M 50 200 L 250 150"
で、線の始点と終点を指定しています。
M 50 200
x座標 50 、y座標 200 の地点から、
L 250 150
x座標 250 、y座標 150 の地点まで線を引く、という指定になります。
なお、これを
L 250 150 100 100 50 150
のように「x座標とy座標のペア」を続けて書く事で、
↑こんな風に「50,100 から 250,150 に線を引き、そこから 100,100 に線を引き、そこから 50,150 に線を引く」という風に折れ線を描く事ができます。
stroke="black"
で「線の色を黒」と指定、
stroke-width="3"
で「線の太さは3ピクセル」と指定、
fill="none"
で「中は塗りつぶさない」と指定しています。
ところで、ちょっと気づいたのですが、<path>タグの書式、手元の情報からは
<path オプション />
のように書く事になっていましたが、はてなブログHTML編集画面に入れると、
<path オプション></path>
に勝手に変更されてしまいますｗ
<svg>タグは削除されるのに、その中身を監視しているのが不思議な感じがしますね
ベジェ曲線
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<text x="20" y="100" style="font-size: 20px; font-weight: bold;">赤く熱く燃える</text>
<path d="M 50 200 Q 200 200 250 150" stroke="black" stroke-width="3" fill="none"></path>
</svg>
さっきのコードで、
L 250 150
としていたところを、
Q 200 200 250 150
に置き換えました。
線の最初と最後の座標は同じですが、途中でひん曲がっていますねｗ
これ、「ベジェ曲線」っていうもので、名前だけは聞いた事があるものの、詳しいところは分かりませんｗ
SVGでは「二次ベジェ曲線」と「三次ベジェ曲線」を使う事ができ、
Q
で描くのは「二次ベジェ曲線」のほうになります。
Q 200 200 250 150
の意味としては、「座標 200 200 を制御点として、座標 250 150 まで線を引く」という指定になります。
「制御点って…何？」となりますが…「そっちのほうに引っ張る」という感じかな？って認識していますｗ
なお、三次ベジェ曲線はQの代わりにCを使い、制御点が２つになります。
（１つめの制御点のx座標・y座標、２つめの制御点のx座標・y座標、終点のx座標・y座標、と６つの数字を並べる事になります）
三次ベジェ曲線もやってみます
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<text x="20" y="100" style="font-size: 20px; font-weight: bold;">赤く熱く燃える</text>
<path d="M 50 200 C 100 150 200 200 250 150" stroke="black" stroke-width="3" fill="none"></path>
</svg>
こういう事ですね。
制御点が２つになった事で、途中で「くねっ、くねっ」と２回、曲がってる線になりました！
作った波線パスに沿って文字を入れる大技！
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<defs>
<path id="namisen" d="M 50 200 C 100 150 200 200 250 150" stroke="black" stroke-width="3" fill="none"></path>
</defs>
<text style="font-size: 20px; font-weight: bold;">
<textpath xlink:href="#namisen">赤く熱く燃えるお日様</textpath>
</text>
</svg>
ここで大技です！
<defs>
というのを使ってみました。
これは「定義する」もので、<defs>と</defs>の間に、先ほど作った三次ベジェ曲線のpathを入れました。
<defs>の中に入れたものは「定義される」だけで終わるので、そのままでは描画されず、別に呼び出して使用する事になります。
呼び出すのに名前が必要なため、
<path id="namisen" d="M 50 200 C 100 150 200 200 250 150" stroke="black" stroke-width="3" fill="none"></path>
のように「id」をつけました。
そして、
<text style="font-size: 20px; font-weight: bold;">
<textpath xlink:href="#namisen">赤く熱く燃えるお日様</textpath>
</text>
<text>タグから位置指定（xとyの指定）を削除して、文字を入れていた部分に
<textpath>タグを入れています。
この<textpath>タグが、「文字をパスに沿って配置」してくれるもので
xlink:href="#namisen"
という書き方で、<defs>で定義した中にあるパスを呼び出して使用しているんですね^^
あとがき
という事で、CSSでは真似できない（多分）、SVGならではの「文字を曲線上に配置」するところまで出来ました^^
まだまだSVGで出来る事は色々あるようで、勉強のしがいがありますｗ
なお、今日、
この本を買ってきました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
