どうも!LSSです!!
この間から、なんとなく調整していた「紗綾型」。
なんかSVGで できたっぽいです。
- SVGで描く紗綾型
- 実はひとつの図形が完成した時点でほぼ完成していた!?
- コピー・再利用するためにはまず、IDをつけます
- 右に20ずらした位置にコピー
- 同様に、左にもコピーしてみます
- さらに、上に3つ配置!
- 下にも3つ配置
- ループの最小単位
- 実際に並べてみないと脳内での解決は無理そうw
SVGで描く紗綾型
コード
<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20"> <path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path> <use xlink:href="#sygt" x="-20" y="0"></use> <use xlink:href="#sygt" x="20" y="0"></use><use xlink:href="#sygt" x="40" y="0"></use><use xlink:href="#sygt" x="-20" y="-10"></use><use xlink:href="#sygt" x="0" y="-10"></use><use xlink:href="#sygt" x="20" y="-10"></use><use xlink:href="#sygt" x="-20" y="10"></use><use xlink:href="#sygt" x="0" y="10"></use><use xlink:href="#sygt" x="20" y="10"></use></svg>[]</p>
実はひとつの図形が完成した時点でほぼ完成していた!?
SVGには「描いた図形をコピーして複数配置する」という機能があります。
昨日の記事、
にて、いかにも適当に付け足した感じでw「紗綾型」を構成する図形を描きました。
少し長さに誤りがあったりもしましたが、修正するとこんな感じになります。
コード
<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20"> <path d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path></svg>[]</p>
コピー・再利用するためにはまず、IDをつけます
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20">
<path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path>
</svg>
[]</p>
↑このように、がんばって長々と書いたPATHタグをコピー・再利用したいので、PATHタグの中に
id="sygt"
を書き足しました。
この時点ではまだ、画像は
変化していません。
右に20ずらした位置にコピー
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20">
<path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path>
<use xlink:href="#sygt" x="20" y="0"></use>
</svg>
[]</p>
このように、
<use xlink:href="#sygt" x="20" y="0"></use>
と書くと、「sygtとをつけた図形を20だけ右にずらした位置にコピーして描画」してくれます^^
これ、
の終わりの方で使った、<defs>とか使うのかな?と思っていましたが、描画済みのものをコピーするだけなら、<path>にidをつけるだけでも利用できるみたいです^^
同様に、左にもコピーしてみます
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20">
<path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path>
<use xlink:href="#sygt" x="20" y="0"></use>
<use xlink:href="#sygt" x="-20" y="0"></use>
</svg>
[]</p>
x="-20" として<use>タグを並べてみました。
…ちょっとそれっぽくなってきましたね^^
さらに、上に3つ配置!
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20">
<path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path>
<use xlink:href="#sygt" x="20" y="0"></use>
<use xlink:href="#sygt" x="-20" y="0"></use>
<use xlink:href="#sygt" x="-20" y="-10"></use>
<use xlink:href="#sygt" x="0" y="-10"></use>
<use xlink:href="#sygt" x="20" y="-10"></use>
</svg>
[]</p>
y="-10" として、xを 「-20」「0」「 20」の3種、<use>タグを並べてみました。
これで、上部もフォローできた!っと^^
下にも3つ配置
コード
<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20">
<path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 2,-1 Z" stroke="lightblue" fill="none"> </path>
<use xlink:href="#sygt" x="20" y="0"></use>
<use xlink:href="#sygt" x="-20" y="0"></use>
<use xlink:href="#sygt" x="-20" y="-10"></use>
<use xlink:href="#sygt" x="0" y="-10"></use>
<use xlink:href="#sygt" x="20" y="-10"></use>
<use xlink:href="#sygt" x="-20" y="10"></use>
<use xlink:href="#sygt" x="0" y="10"></use>
<use xlink:href="#sygt" x="20" y="10"></use>
</svg>
[]</p>
今度は、y="10" として、xを 「-20」「0」「 20」の3種、<use>タグを並べてみました。
これで、完全に「紗綾型」の完成です!!
ループの最小単位
ところで、問題のひとつだった、
Webでの背景模様とかに利用できるんじゃないかな? その場合、縦横にループさせる「最小構成」を見極め、画像化(CSSだったりSVGだったり)すればできそうです。
不思議な模様【紗綾形(さやがた)】 - Little Strange Software
なんですが、今回の「幅 40 高さ 20」の画像(viewbox="0 0 40 20")でもループできそうな気がします。
ですが、実はもしかしたら、「幅 20 高さ 20」でもいけたり「幅 20 高さ 10」でもいけたりするのかも!?
実際に並べてみないと脳内での解決は無理そうw
並べて配置してみたら、一発なんですが…。
実はここに大きな問題が!
この、「HTMLコード中にSVGタグで描画」したものを、「背景画像として繰り返し配置して描画」するのは、実はとっても困難だったりします^^;;;
方法はあるのですが「そのためだけにJavaScriptを使用しないといけない」ので、すこーし面倒ですねw
あくまで、インラインSVGの場合の話であって、SVG形式の画像ファイルであれば、HTMLだけでも解決する話(はてなフォトがSVGに対応していたらなぁw)
というわけで、この「ループ最小単位」の問題は後日に持ち越す事にします。
より小さい単位で済めば、今回8つも使った<use>タグの数も減らせそうですね^^
追記!
…と書いていましたが
背景に指定する事が無事できました^^
ついでに「ループ最小単位」も見つけたっぽいw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^