私は数ヶ月ほど前に、友人の間で作っていた個別プロジェクトのAIエンジン、インフラ、サーバーサイド、フロントエンドを担当していました。プロダクトでは人工知能(特にニューラルネットワーク:NN)を考えていたため、プロジェクトの紹介ページでは以下のようなアニメーションを作成して載せました。アップロードする際に画質を落としたので、少し見辛いかもしれません。このホームページはVue.jsで書かれています。個人的に街並みのアニメーションも欲しくて、以下のようなアニメーションも作成して組み込みました。サイトに長くいて欲しいので、飛行機だったり、速度オーバーする車、それを取りしまる車など、かなり盛り込みました。家や風車の速度を調整して遠近感を出してみるなど、それなりに工夫をしました。このようなアニメーションを作成するにあたって、例えばNNの隠れ層数NNのノード数などを自動生成で対応できるAPIを作りました。いつか公開しようかなと思います。解説symbol要素とは次に説明するuse要素と合わせてSVGでオブジェクトをグループ化して参照するための要素です。<symbol>要素はグループとして要素をまとめるためのものです。同様の役割を果たす<g>要素がいますが、<symbol>要素で囲まれたものは何も表示されません。宣言するという構造上<defs>要素に<g>要素と同様に格納するのが慣習となっているみたいです。ここでは節を設けていませんが<defs>タグというものは開始タグと終了タグの間の要素を表示しません。<g>要素と違うところは以下の通りです。viewBox属性を持てるpreserveAspectRatio属性を持てるここで実際に書いてみようと思います。指定してviewPortを作ります。この領域ではSVGが描画されます。円がかけることを確認します。fill="#fedf51"/></svg>そして次に<defs>、<symbols>要素を使ってみます。</svg>すると案の定、何も表示されません。これと使うには次節の<use>要素が必要となります。use要素とはもちろん<defs><g>でするパターンと<symbol>でするパターンには明確な理由があります。それはモジュール化して、再利用できて、拡張性を高くするためです。どのようにして宣言した要素を使うことができるのでしょうか。ここで<use>要素を使います。以下のようにxlink:href属性でURIを再利用したいグループやシンボルを指定し、どこに使うか(useするか)をxとyで定義します。traslateプレゼンテーション属性を使うことによってさらに変換をかけることができます。ここでuse使っていきます。y="0"/>とすると以下のようになります。ここでxとyを指定したのですが、これはuseするものを一つの系と捉え、use先からの相対座標を決めます。symbolはviewPortという絶対座標系で書かれていたので、それをモジュール化してuseすると、そのxとyは相対距離を入れるので、viewPort内に収まっているか収まっていないかの問題はおいておいて、中の要素自体が変わるわけではありません。viewBox属性とはviewBox属性とは子要素を描画する際に拡大したり、縮小したり、移動などができるものです。指定の方法は以下の通りです。height"デフォルトではpreserveAspectRatioが有効になっています。xとyについてまず、半径がviewPortの半分の円を書きます。400"なので以下のようになっています。ここで以下のようにします。400"とすると以下のようになります。ここからviewBoxがわからなくなる人が多いと思うのですが、viewBox属性は子要素のために施すためのものと覚えれば大丈夫です。400"へと変わりました。2のように今まで通り円が親要素の座標系で描かれますしかしながら、この要素はviewBox内で見えるものを親要素に移すような働きをするので、結果として以下のようになります。他にもやってみましょう。400"は以下の通りです。heightとwidthについて次はheightとweightを変えてみましょう。800"をしてみます。このようになるのでしょうか。実は以下のような流れになっています。明文化するとviewBoxでwidthとheight`を指定するとその大きさに座標変換をかけるがしっくりくると思います。400/800ずつそれぞれの座標変換されます。200"は少し簡単かもしれません。200でみたいので、当然円は2倍大きくみえます。座標も100にあったものはviewPortが絶対座標だと考えると200に見えるようになります。400"はこのようになっています。200"は以下の通りです。まとめると一旦はviewBoxの大きさでみてみるそれをviewPortの大きさに収めようとしたらどうなるかを考えるxとyとheightとwidthについて落ち着いて考えると理解できるようになりました。400"のようなケースです。これも今までならったようにviewBoxを移動させてどのようにviewPortに拡大・縮小されるかを考えてするとこのようになり、思ったような挙動になります。symbolとviewBox先ほどのsymbolのセクションでsymbolも同様にviewBoxを持つことができると説明しました。ただでさえ、理解の難しかったviewBoxに、さらにviewBoxが入ってきたらどうなるでしょう。最初に何も指定していない以下のような円を定義します。</svg>これは以下のような円が描画されます。ここのsymbol要素にviewBoxを指定してみましょう。</svg>すると以下のようになります。なっているのかは知りませんが、何も変わらなそうなのはイメージできます。800"に変えてみると以下のようになります。もとのsvg要素のviewBoxも変更します。</svg>何も起きません。svg要素だけ変更してsymbol要素を変更しなかったらどうなるのか。</svg>すると以下のようになります。まとめるとviewBoxは描画される際に適用されるものなので、重複してviewBoxがheigthとwidthに適用されることはない。800"のようなxとyを指定すると同様に影響するたとえば以下の通りです。CSSといえど、プログラミング言...2018-12-14CircleCIでSpinnakerのデプロイメントパイプラインをデプロイするどうも、もうすぐ大学卒業の@timtimtim1026です。2018の第3日目の記事です。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。