Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【SVG】紗綾型、なんか…できたっぽい

 どうも!LSSです!!

 

この間から、なんとなく調整していた「紗綾型」。

なんかSVGで できたっぽいです。

 

  

 

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>タグの数も減らせそうですね^^ 

 

追記!

…と書いていましたが 

little-strange.hatenablog.com

背景に指定する事が無事できました^^

ついでに「ループ最小単位」も見つけたっぽいw

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^