どうも！LSSです！！
昨日の記事、【SVG】波打つ文字（文字変形）に少し手を加えてみました。
波打つ文字、点線バージョン
コード
[]<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 200 40"><defs><path id="pt1" d="M 4,35 Q 60,5 100,25 Q 140,40 195,15"></path></defs><use x="0" y="0" xlink:href="#pt1" stroke="lightgreen" stroke-width="3" fill="none" stroke-dasharray="3 2"></use><text style="font-size: 16px;" stroke="blue" stroke-width="0.3" fill="#ccccff40"><textpath xlink:href="#pt1" startoffset="5%">Little Strange Software</textpath></text></svg>[]
線を点線にする
<use x="0" y="0" xlink:href="#pt1" stroke="lightgreen" stroke-width="3" fill="none" stroke-dasharray="3 2"></use>
このサンプルで線を描画しているのは<use>タグですが、そこにオプションとして、
stroke-dasharray="3 2"
を付け加えると点線になります。
この「3」と「2」は「実線の長さ」「次の実線までの空白の長さ」を指定していて、自動的に繰り返されます。
例えばこれを、「3 2 7 2」のようにすると…一点鎖線になります。
↑こんな感じ。
昨日記事をあげてから、早速使ってくださった方が！
早い…！！
しかも、どちらもオリジナリティを加えて使っていただいています^^
ありがとうございます^^
今回の点線は
昨日の記事に、421miyakoさん(id:m421miyako) からいただいたコメントから。
いつもヒントをいただき、ありがとうございます^^
また、はてブコメントに、やすまるさん(id:yasumarutaiwan)からいただいたコメントで思ったのですが、文章が長く続くところに、閑話休題的な意図で挟むのもいいかもですね^^
…と思って、安易にブログ名にしてみましたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
