この動画では、スケーラブルベクターグラフィックス（SVG）の基本的な仕組みと実用的な活用方法について詳しく解説している。動画の製作者は、これまでSVGファイルの色を変更する程度の基本的な操作しかできなかったが、Josh Comeoの優秀な記事を通じてSVGの真の可能性を学んでいく。内容には、SVGの基本構造、座標系、図形の作成方法、アニメーション技術、そして手書きでSVGを作成するメリットなどが含まれている。特に、viewboxの概念、strokeプロパティの詳細な制御、そしてSVGアニメーションの実装方法について実践的な知識が提供されている。
SVGの魅力とその理解への道のり
私はSVGを愛している。これが論争を呼ぶ意見でないことを願っている。皆さんがあまり気に入らなかったWEBPに関する私の見解とは違って。SVGはスケーラブルベクターグラフィックスの略だ。無限に高解像度でも低解像度でも、とても少量のデータで画像を表現できる。私たちが毎日使って愛用している多くのものを支える素晴らしいフォーマットだ。
とはいえ、皆さんに正直に言わなければならない。私は実際のところSVGをよく理解していない。SVGファイルを開いて塗りつぶしの色を少し変更したことは何度もある。他のグラフィックソフトウェアを使って自分で作ったこともたくさんある。でも、もし私にSVGを座って書けと言われても、できるかどうか分からない。面白いことに、AIもSVGは苦手のようだ。
だから、SVGについて学ぶ時が来たということだろう。ありがたいことに、絶対的な伝説であるJosh Comeoが、SVGが実際にどのように機能するかを分かりやすく解説した素晴らしい記事を公開したばかりだ。私は常にSVGの適切で深い知識の不足を感じていたので、特にアニメーション関係において、この記事に飛び込むのが本当に楽しみだ。
SVGでアニメーションがどのように機能するかについての奇妙な歴史があることは知っているが、それは公式にはサポートされていない。CSSでやることになっている。ああ、その部分は楽しみではないが、もっとたくさん学ぶことは楽しみだ。これはいい感じがする。私がJoshの作品を取り上げるたびに、それが私の最高の動画の一つになる。今回もそのケースの一つになりそうな気がする。
スポンサー紹介とMobinの活用
スムーズなSVGアニメーションを作るのが難しいと思うなら、スムーズなスポンサー遷移がどれほど難しいか想像もつかないだろう。だから、ストレートに切り込んで、それから飛び込んでいこう。
前にも来たことがあるなら、止めてくれ。アプリケーションに追加する必要のある新機能があるが、どこから始めればいいか分からない。それを作る方法は知っているし、AIも作る方法を知っているが、どのような見た目にすべきか分からない。選択したAIツールに作ってもらうよう依頼すると、もしかしたらコードは動くかもしれないが、見た目があまり良くない。そして、どうやって正しい見た目にするか知っていたらと願う。
今日のスポンサーがそこを助けてくれる。いや、彼らが魔法のようにコードを生成してくれるわけではない。そのためのソリューションはたくさんある。彼らは正しいインスピレーションを与えてくれる。Mobinは彼らが私に連絡してきたとき、最初は理解できなかった会社の一つだった。でも試してみたら、すぐに恋に落ち、最初の広告読み上げ中にライブでサインアップした。それほど試した時に驚いたからだ。
始めるのは無料だが、すぐに支払いを始めることになるだろう。なぜなら、それが何をするかに驚くからだ。Mobinはアプリ用のGoogle画像のようなもので、すべてのアプリ、すべての画面を、カテゴリとフィルタリングと、これらの難しいデザイン問題を他の人がどのように解決したかを見つけるために必要なもので網羅している。iOS、Android、ウェブアプリケーション1000個にわたって50万枚以上の画面を持ち、その中の異なるもののための美しい分類とフィルタリングも持っている。
たとえば、ペイウォールを見たいとしよう。ああ、たくさんの異なるオプションがある。私たちに関連するカテゴリのものにフィルタリングしてみよう。AIペイウォールを見てみよう。これが異なるAIアプリがペイウォールをどのように実装しているかだ。これは実際に本当に役立つ。なぜなら、私たちは今、T3チャット用のモバイルアプリを作っている最中だからだ。そして見てみろ。ChatGPT Plusソリューションは実際に結構いい。
これを自分の作業に使いたい場合、Command Z、Command Tab、Command I、ペースト。これと同じような見た目にして。それだけ簡単だ。本当に素晴らしい。アプリケーションをより良くするための参考ポイントとインスピレーションを探しているなら、もう探す必要はない。Mobinがあなたが欲しいと思うすべてのアプリとすべての画面でカバーしてくれる。
あなたがバイブコーダーでも、デザイナーでも、経験豊富なエンジニアでも、Mobinがあなたの人生を楽にしてくれることを約束する。soy./mobinで今日無料で試してみてくれ。
SVGの基礎知識とその魅力
SVGへの親しみやすい入門。SVGは、ブラウザでアクセスできる最もエキサイティングな技術の一つだ。SVGでできる本当にクールなことがたくさんある。私のツールキットの絶対に重要な部分だ。ここに、Joshが作ったもののクイックモンタージュがある。これらは全て実際に本当にクールだ。すごいな。Joshは本当に自分のやっていることが上手い。業界最高の一人だ。
彼が最高のウェブ開発CSS デザイン系の人々の中にいて、それをただやってサービスとして売るのではなく、教育リソースを作っているという事実。もしあなたの職場で教育予算があるなら、使わなくても彼のものにその一部を費やすべきだ。彼のような才能のある人がこれらのリソースを作成していることがいかに幸運であるかを支援するためだけでも。それは信じられないことだ。
とにかく、SVGもかなり威圧的だ。うさぎの穴は深く、圧倒されやすい。私自身も確かにそう感じたことがある。だから、この投稿でJoshは最も重要な基礎を共有して、私たちが構築できる堅固な基盤を提供したいと思っている。彼はなぜSVGがとてもクールなのかを見せてくれるし、すぐに使い始められるいくつかのトリックも共有してくれる。
SVGの基本構造を理解する
SVGとの出会い。その核心において、スケーラブルベクターグラフィックはJPEGやGIFのような画像フォーマットだ。他の画像と同様に、画像タグに入れることができる。これは機能するが、SVGをとてもクールで興味深いものにしているものではない。
本当の魔法は、インラインSVGを使用するときに起こる。JPEGのような最も画像フォーマットは、バイナリフォーマットだ。テキストエディタでそれらを開こうとすると、意味不明な文字がたくさん見える。対照的に、SVGはHTMLと同じように、XML構文を使用して指定される。各ピクセルのRGB色を指定する代わりに、SVGにはイラストレーションをレンダリングするために必要な描画指示のセットが含まれている。
やや魔法のように、生のSVGコードをHTMLドキュメントに直接ドロップできる。ここに、100ピクセルの幅と高さのSVGがあり、円がある。ホットピンクで塗りつぶされている。その半径は30だ。XとY…CXとCYは幅と高さのようなものだと思う。50なのかな？これを変更できるかな？ああ、位置だ。そう、相対的だ。センターXとセンターYの位置は50/50だ。だから、真ん中にある。理にかなっている。
チャット、ありがとう。チャットが私を修正したちょうどそのときに、私はそれに気づいた。ありがとう、皆さん。見ての通り、私たちは一緒にたくさん学ぼうとしている。HTMLでは、すべて文書に関連する一連のプリミティブが与えられる。段落と見出しとリスト、Wordで得るのと同じプリミティブだ。SVGも同じような取り扱いだが、すべてのプリミティブはイラストレーション用だ。円やポリゴンやパスのようなもの。
正直に言うと、SVGを見るとき、私には大量のパスしか見えない感じがする。他のものがどれだけ重要なのか気になる。私が評価している以上に重要だと確信しているが、私の経験では、それほど重要ではなかった。だから、これは学ぶのが楽しいことになるだろう。
本当にクールなことは、SVGがDOMの第一級市民だということだ。SVGノードをHTMLエレメントかのようにCSSとJavaScriptを使って選択し、変更できる。これがその例だ。要素にフォーカスしたりタップしたりでき、そうするとCSSがSVGの部分に適用される。
だから、円をホットピンクで塗りつぶす。色をそこに入れる必要さえない。そして、ホバーやフォーカス可視状態で、大きくして位置を移動する。塗りつぶしを赤に変更することもでき、変化する。クールじゃないか？塗りつぶしにトランジションも設定できる。見てくれ。1500にする。赤でかなり遅くなる。これができるGIFを見せてくれ。
円の色や半径のような多くのSVG属性は、CSSプロパティとしても機能する。つまり、CSSでそれらを変更でき、CSS トランジションを使ってアニメーション化することもできる。これがSVGを非常に強力にするものだ。文書の代わりにイラストレーションに焦点を当てた、HTMLの代替現実バージョンのようなものだ。既存のCSSとJavaScriptスキルを使ってそれらを動的にできる。ああ、これは怖いが、楽しみだ。
SVGを手書きで作成することの利点
SVGを手で書く。少し直感に反するように見えるかもしれないが、私はしばしばIllustratorやFigmaのようなデザインソフトウェアを使うのではなく、コードエディタでSVGを作成する。デザインソフトウェアはSVGにエクスポートできるが、すべてを単一のパス要素にまとめる傾向がある。
突然、私のバイアスが理にかなってきた。これにより、個々の要素をアニメーション化するのがはるかに難しくなる。これは私の意見では、SVGの最もクールなことだ。何をやっているかに少し依存する。ある程度の複雑さを超えると、専用ソフトウェアでやる方がはるかに実用的だ。上のモンタージュで見せたようなもののためには、手でコーディングする方が簡単だと思う。
ホバーしたときに小さなものが見える。まあ、そうだ、彼はこれが上手い。彼の言葉を信じる。手で書けるほど上達するのが楽しみだ。どうなるか見てみよう。
SVGの基本図形の理解
上で見たように、SVGには独自のUIプリミティブのセットが含まれている。divやbuttonの代わりに、circleやpolygonのような図形がある。それらを見ていこう。
最も基本的なのは線だ。最初の点にx1 y1座標があり、二番目にx2 y2がある。ブラウザがサポートする任意の色のstrokeを与えることができ、そのstrokeの幅も指定できる。ああ、見てくれ。つまみを与えてくれた。とても基本的なことだが、すでにHTMLでは簡単にできないことをやった。
HTMLで対角線を描く唯一の方法は、長い薄いDOMノードを作成して回転させることで、その線を特定の場所で開始して終了させる必要がある場合、すぐに高度な数学の問題になる。ああ、それは考えもしなかった。ああ、音がした。音さえ聞こえなかった。ああ、Josh、本当に上手くやった。とても良い。
とにかく、ここで関連付けられる一つのことは、まったく同じではないが、私は馬鹿なゲームを作った。確か2021年だったと思う。Dogecoinシミュレーター。Universal Paperclipにとてもインスピレーションを受けているが、Dogecoinでのリターンを最大化しようとするものだ。Dogecoinバブル中に作った。私が本当に、本当にやりたかったことで、ここでなんとかやり遂げたのが見えるが、すべてのボーダーを本当にひどく手描きのようにしたかった。
ボタンのボーダーを正しく整列していないようにしたかったが、それはとても大変だった。これのためにSVGの上にマスクである画像を使っているか何かだと思う。それを理解しようと多くの時間を費やし、これが私ができる最高のことだった。HTMLで直線やborder-radiusでないものを作るのは本当に大変だ。
イースターエッグについて教えられた。私について何か知っているなら、イースターエッグに関しては自分を抑えることができないことを知っているだろう。ああ、かわいい。戻ろう。
だから、SVGで対角線が欲しい場合、それはとても簡単だ。デフォルトでは、線は見えない。実際に描くためには、色を与える必要がある。また、stroke widthを与えて太くすることもできるので、実際にはっきりと見える。strokeとstroke widthは両方とも表示属性の例で、XY X2 Y2のようなジオメトリ属性とは対照的だ。違いについてはすぐに詳しく学ぶ。
矩形とその特徴
今度は矩形がある。それらが何なのか気になる。XY 幅 高さ 塗りつぶし stroke stroke width。今のところ理にかなっている。でも今度は塗りつぶしがある。それを変更しよう。ああ、それは表示的なものが後で出てくるからだ。
一見すると、これはボーダーを持つdivのように見える。しかし、いくつかの核心的な違いがある。まず、strokeはパスの中心に描かれ、内側や外側ではない。それは実際に非常に興味深い。私のキャリアでborder boxと取り組んだ量を考えると、これはそれを解決している。
そうだ。大きくすると、内側のスペースが減り、外側も拡大する。数学的には難しいが、最低限一貫している。これはすべての図形に当てはまり、矩形だけではない。残念ながら、設定可能ではない。図形のstrokeを外側や内側に描くように指定することはできない。
注目すべき別の興味深いことは、幅や高さをゼロに減らしたときに何が起こるかだ。直線になると期待するかもしれないが、代わりに図形全体が消える。とても興味深い。SVGスペックでは、この種の図形は退化型として知られている。Joshにはかなり厳しく感じる。分からない。ここにはたくさんのdegenがいる。それほど攻撃的だとは思わない。
矩形のような2次元図形が1次元にしか伸びない場合、無効とみなされ、レンダリングされない。どうやら数年前、一部のブラウザは他のブラウザがそうしないときでも、退化図形を描画していたらしい。Firefoxが退化図形のファンであることは理解できる。理にかなっている。しかし今、すべてのモダンブラウザはスペックに正しく従っている。申し訳ない、チャット、あなたたちはあなたたちが何であるかだ。あなたたちが何であるか知っている。
円と楕円の理解
RXとRY プロパティを使って角も丸められる。border radiusに似ているが、XとYの丸みを異なって指定できる。だから、かなり異なるカーブを得られる。ああ、これは本当に良い視覚化だ。RXとRYは、角から円や楕円を描いているかのようで、その円の形状が半径を決定する。この楕円を視覚化するこの方法が本当に好きだ。
確かに。チャット、ありがとう。分かるでしょう。私はデータベースで働いているので、ユーザーインターフェースではない。JSの人としてステレオタイプされていることは知っているが、うまくいけば、これがUIデザインが私の強みでないことを皆さんに示している。
楕円といえば、今度は円に移る時だ。中心点に基づいて位置決めするため、中心XとセンターYの位置だ。他のもののようにX1、X2ではないから、私はそれが好きだ。中心点だ。理にかなっている。相対的に物事を配置するのを少し難しくする。円を矩形の隣に置くのは面倒かもしれない。なぜなら、これと半径に基づいて、別の矩形のX1 Y1位置に対して相対的に計算しなければならないから。
矩形と同様に、半径がゼロに設定されると、円は完全に消える。ああ、そして円とは別の楕円がある。だから、それらは異なるものだと思う。ここで水平と垂直の半径を変更できる。再び、どちらかがゼロの場合、消える。クール。
ポリゴンと座標システム
ポリゴンもある。これは点のセットだ。事実上、点の配列を与えられるのが好きだ。かなりクールだ。ドープ。
points属性はXY点のリストを取る。ブラウザは各点の間に線を描き、最後の点から最初に戻る。SVGを学んでいたとき、これは少し混乱した。私の脳では、ポリゴンという用語は非常に特定のものを指す。三角形、四角形、六角形、八角形のような回転対称を持つ図形だ。
ええ、これらは正多角形だが、より広いポリゴン世界の平坦な部分集合だ。彼はイースターエッグが大好きだ。かわいい。正多角形を作るには、三角法を使う必要がある。ああ、三角法。実は高校では三角法がとても得意だった。ブログポストの範囲を少し超えているが、もっと学びたいなら、プレイグラウンドに計算を入れておく。これらはそれほど複雑ではない。偶数の回転オフセット。楽しい。
SVGフォーマットと可読性
今度は、SVGフォーマットについて少し。上のデモでは、点のセットを明確にするためにコンマと改行を使った。追加の文字はSVGスペックでは余分なものと見なされる。有効だが不要だ。野生で見つけるほとんどのSVGはこのように見える。興味深い。
つまり、これはポイント1のXY、ポイント2のXY、ポイント3のXY、ポイント4のXYだ。コンマとすべてのフォーマットが完全に無視されることを知らなかった。Pythonの正反対のようなものだ。あなたについては知らないが、私にはこの数字のリストを理解するのがはるかに困難だ。絶対に同感だ。
確かに、過去には、この種の最適化がウェブサイトとウェブアプリのパフォーマンスに小さいが重要な違いを作ることができた。しかし、最近では、ウェブサーバーはgzip圧縮を使用しており、つまりいくつかの追加のコンマと改行はファイルサイズに実際には影響しない。だから、SVGに役立つフォーマットを追加することを強く推奨する。ユーザーは気づかないが、あなたのチームの他の開発者と将来のあなた自身は、読みやすいSVGから恩恵を受ける。ええ、絶対に同感だ。
polylineやtextのようないくつかの他のプリミティブ図形があるが、今のところ入門ブログポストとしては十分カバーした。進もう。
スケーラブルなSVGの理解
スケーラブルなSVG。今まで、物事に絶対座標を使ってきた。つまり、SVGは非常に特定のサイズでなければならず、そうでなければ壊れる。そうだ。私たちは皆、これが起こったことがあると確信している。SVGをレンダリングしようとして、SVGの幅と高さによってクリップされてしまった。ついに、これが起こらないようにする方法を学ぶのか？それはとても良いだろう。これを回避するためにたくさんのハックをしてきた。SVGを開く唯一の時間は、相対パスをハックして異なる形状に収めようとすることだ。
このデモでは、円は300ピクセル幅の要素の中央に座ることになっている。しかし、要素により小さな幅が与えられると、円は縮小しない。クロップされる。ほとんどの画像がそのように機能するわけではない。JPEGをレンダリングするとき、写真は要素のサイズに応じて拡大縮小する。
この問題に対するあまり良くない解決策の一つ。ああ、Josh、ドロップインしてくれてありがとう。まだ彼のニュースレターをチェックしていないなら、強くお勧めする。私はすでに購読している。あなたもするべきだ。この問題に対するあまり良くない解決策の一つは、幅に基づいてすべての値を動的に再計算することだ。
だから、縮小すると、JavaScriptで幅の値に基づいてcxとcyを変更できるが、それは最悪だ。これは機能するが、このような非常にシンプルなイラストでさえ、大きな苦痛だ。幸い、より良い方法がある。viewbox。良い。
viewbox属性は内部座標系を定義する。これが提供されると、円と矩形とポリゴンはDOMから生のピクセル値を継承するのを止め、代わりに内部座標系を使用する。これはXY1だ。これはXY2だ。その学びが私にとって既にたくさんのことを解放した。
つまり、左上の角は0 0で、右下の角は300 220だ。これは編集可能、これは編集可能ではない。でも、これは物事を異なって配置したい場合、viewboxの角にマイナスを使用できることも意味する。正方形や矩形や他の形状に変えて、幅や高さのどちらかだけ設定すればよく、そこから残りを把握できることを意味する。とても良い。
だから彼が言ったように、viewboxは矩形だ。そう、ボックスは矩形の一種だ。理にかなっている。viewbox属性は定義する そうだ。viewboxは4つの数字を取るが、実際には2つのペアの2つの数字として考えることができる。左上と右下だ。ああ、見てくれ。私が言った通りだ。ああ、とてもクールな視覚化だ。
とてもクール。これを動かすと、viewboxを変更している。だから、0 0のときは、その角にあり、ボックスは200 200だ。そこに余分なスペースを見ることができる。これを説明するための本当に、本当に良いビジュアライザーだ。いつものように良い、Josh。
viewboxは実際にビューポートのように機能する。たとえば、このブログポストは、ブラウザウィンドウよりもはるかに高い。だから、レッスンの一部がビューポートに表示される。スクロールすることで、見ている部分を変更できる。viewboxでも同じような考えだ。無限であることについてのクールな呼び出しがここにある。
HTMLドキュメントとSVGイラストレーションの興味深い違いの一つは、SVGに端がないことだ。理論的には、あらゆる方向に無限に延びている。原点からどの方向にも100万ピクセル離れた場所に図形を配置することを妨げるものは何もない。viewboxは、この無限のフィールドのどの部分を見ているかを決定する。
viewboxに使用される第二のペアの値について話そう。これら2つの値により、表示可能エリアの幅と高さを指定できる。それがviewboxのサイズで、それからそれをシフトしている。でも再び、これを左上と右下として考えている。これを設定すると そう、3030。オーケー、それはまだマイナスにある。だから、それは実際には正しくない。つまり、これはXY原点だ。そして、これはXからどれだけ離れていて、Yからどれだけ離れているかを許可されている。
だから、-40 -40のようにしたら、XYに-40があり、サイズに3030がある。つまり、これは-40 -40から-10 -10まで行く。この数字がこの数字に加算されて、最も遠いx座標を知る。そして、この数字がこれに加算されて、最も遠いyを知る。
そう、私が言っていたように、viewboxに渡す第二のペアの値は、実際に見ている無限のSVGフィールドの量を制御する。SVGのサイズを変更するわけではない。それは幅と高さで制御される。代わりに、効果的にズームレベルを変更する。この考え方が好きだ。
上のデモでは、SVGは300 x 300だ。viewboxを0 0 300 300に設定すると、完璧な1:1になる。でも0 0 150 150にすると、SVGは依然として300ピクセル x 300ピクセルだが、SVGキャンバスの150 150ゾーンエリアのみを表示している。このアナロジーが好きだ。
ブラウザのズーム機能、CommandプラスとCommandマイナスを使うようなもので、私は常に使っている。ブラウザウィンドウのサイズを変更するわけではないが、中のすべてを元のサイズの2倍にスケールアップする。
だから、viewbox属性がどのように表示可能エリアをスライドさせたり、ズームインやズームアウトに使えるかを見た。正直に言うと、これらのことをやったことがあるかどうか確信がない。シフトやviewboxのズームの唯一の現実的な使用例として思い浮かべられるのは、たくさんの詳細を持つ巨大なチャートがあり、あるセクションから別のセクションにジャンプしてユーザーをガイドしたい場合だ。これが使われているのも見たことがない。つまり、SVGを定義するために使われているが、動的に動かすためではない。
これを示すことの価値は、viewboxがどのように機能するかを理解することだが、実際には、これらの値を静的に保つことになる。そして再び、SVGの魔法の一部は、ベクターであることだ。つまり、ピクセル値ではない。文字通り、x座標とy座標にはピクセル値があるが、画像のように各ピクセルに色が割り当てられているピクセル値ではない。
つまり、画像をズームし始めると、ピクセルが見え始める。SVGをズームすると、スケーラブルベクターグラフィックスだから見えない。選択したズーム解像度で線を描画している。そう、彼らがここで言っているように、鮮明さを失うことなく、好きなだけズームできる。10倍や100倍ズームしても、画像が鮮明に見え続けるのは本当に魔法的だ。本当に、本当にクールに感じる。
表示属性とstrokeの詳細
今度は表示属性がある。SVGでは、図形はfill属性で塗りつぶすか、stroke属性でアウトラインを描くか、または両方ができる。fill属性はかなり自明だ。だから、strokeに焦点を当てよう。HTMLボーダーのようなものだが、はるかに強力だ。
ここで異なるバリアントを切り替えて、何が可能かを感覚的に掴んでみてくれ。ああ、アニメーションがとてもクール。特にstroke line capフィールドが本当にクール。Squareで、各ダッシュがどれくらい大きいかを選択できる。それは知らなかった。それは実際にクール。
何？オーケー、これは私にとって最大のマインドブロウだ。strokeにそのレベルのカスタマイゼーションがあることを全く知らなかった。私が進んでいくのをただ聞いているなら、この点を見てくれ。これは本当に視覚的にクールだから。dash arrayを指定して、各ダッシュの開始と終了がどれくらい大きいかを選択できる。少なくとも、それが私の推測だ。すぐに説明されると確信しているが、それはとてもクール。
strokeの表示を、いくつかのstroke CSSプロパティを使って制御する。インライン属性として設定することもできる。だから、CSSでstroke width 5を設定する代わりに、SVG自体で直接設定できる。これらの値の簡単な内訳がここにある。
strokeは色を設定し、デフォルトは透明。stroke widthはstrokeの幅をピクセルで設定。stroke dash array。これが私が興奮していたものだ。各セグメントの幅とその間のギャップを設定する。10 20のような2つの値を渡す。10ピクセルのダッシュと、その間に20ピクセルのギャップが欲しいと言っている。2つ以上の値を指定することで、繰り返しパターンを指定することもできる。
オーケー。ここではstrokeを0にしたいが、20のギャップがある。だから、それが大きな空のスポットだ。そして、60のギャップで26のstrokeが欲しい。では、そのドットはどこから来るのか？まだ理解していない。ああ、ゼロでもドットだから？それだ。オーケー。つまり、ゼロでも何かを表示する。それがドットだから。
私が見逃していた部分は、dash arrayのセクションをスキップできないということだ。常に開始に値を入れなければならない。そして、値がゼロの場合、それはドットを意味するだけだ。だから、ドット、10のスペース、長さ25、10のスペース、ドット、10のスペース、長さ25、10のスペース。それで今理にかなった。だから、これは、ドット、20のスペース、26、60のスペース。
そして、それらのダッシュの各端をどのようにキャップオフするかを選択できる。round、square、またはデフォルト値のbuttを使用できる。これらの四角形がすべて四角形のままであるのは奇妙だ。水平と垂直に整列していて、直線的ではない。もしbuttだったらそうなったであろうように整列していない。
squareからbuttに変更すると、ドットが失われる。オーケー、4でも四角形のままだろう。でも、ここでは四角形は、このページと整列していて、strokeと整列していないこの位置に基づいて回転している。stroke line capとしてbuttで0を入れると、消える。それをsquareに変更すると、ページと整列したままでstrokeとは整列しない。とても興味深い。
知っておくべきクールなことだが、決して推測できなかったであろうことで、彼がここでbuttを使って間のスポットを持たないことで踊り回ったことは、squareとround以外のものを使うときだ。つまり、デフォルトであるbuttを使うとき、ゼロ値はレンダリングされない。どうやら、これを1にすると、再び整列する。とても興味深い。これは、ゼロ幅ダッシュがある場合のエッジケースのようなものだ。彼がこのすべてに触れることを願う。これは私たちが発見した非常に興味深いエッジケースのセットだ。
ああ、いいや、彼はそうしないようだ。まあ、これについてもっと理解したいなら、宿題がある。次に、アニメーションstrokeがある。彼は絶対にその例で使っていた。これらの異なる部分すべてに異なる速度でトランジションを設定できる。だから、変更されるとき、アニメーション化される。それは本当にクール。
上のデモでは、非常に基本的なCSS トランジションを使って、異なるstrokeスタイル間でスムーズに補間している。図形の周りでダッシュをスライドさせるための別個のdash offsetもある。それがどのように機能するか気になっていた。それは本当にクール。これで無限アニメーションを設定することもできる。非常に、非常にクール。SVGでアニメーションを正しく行う方法を理解し始めている。
私が前に暗示していたことは、SVGにCSSをインラインできるので、SVGファイル自体にアニメーションが焼き込まれるということだ。SVGをアップロードできる特定の場所で、結果として動画像を持つことができる。だから、特定のサービスがSVGをプロフィールや背景として設定させてくれる場合、そこにCSSを追加すれば機能するかもしれない。
SVG内でのアニメーションは、ウェブ標準を追跡するほとんどのものによると非推奨だが、シームレスな効果のためにやることができる。stroke offsetがダッシュプラスギャップの合計長さに等しいことを確認したい。そうしないと、アニメーションがループするときにちらつきに気づくだろう。理にかなっている。
ダッシュの長さとオフセットをアニメーション化すると、実際にそれでファンシーなスピナーを作成できる。ああ、美しい。ここでは何もロードしていない。スピナー自体をデモンストレーションしているだけだ。
私たちは皆、そのGitHubアカウント、SVGスピナーのGitHubリポジトリに行ったことがあるだろう。それらのためのCSSと一緒に、たくさんの異なるスピナーを持つ。でも今これを理解したので、そのCSSを見てみよう。それを修正しよう。これで、このローディングスピナーの内側にある実際のCSSがある。
transform origin center animation は、ここで定義したもの、key frame 1.5秒 linear infiniteを使用。そして、360度回転させることで変換する。超超簡単。クール。進んでいくうちにたくさん学んでいる。
最後に、最も有名なトリックは、SVG自体を描いているような錯覚を作ることだ。これがどのように機能するか常に気になっていた。ここでの賢いトリックは、図形の全周囲と同じ長さの単一のダッシュ、この特定のケースでは763ピクセル、と各ダッシュ間の巨大なギャップを持つことだ。stroke dash offsetをアニメーション化してこのダッシュを所定の位置にスライドさせることで図形を描く。
興味深い。それは実際に本当にクールだ。dash offsetがダッシュが始まる前に始まるから。ダッシュが超長いのに、これはレンダリングされない。でも、描くをクリックすると、dash offsetをゼロに設定し、アニメーションがパスをフレームに移動させ、それが表示される原因となる。とてもクールなもの。
でも、図形の周囲をどうやって把握するのか？JavaScriptを使って計算できる。ポリゴンpath lengthを要素として選択し、total lengthを取得する。これが言われた周囲を取得する魔法のメソッドだ。そして、stroke dash arrayをpath length、任意に大きな値に設定する。
これは正確な長さを与えてくれるので、問題に対する理想的な解決策だが、過去には試行錯誤で解決したこともある。正しく見えるまで長さを推測した。手動でオーバーライドすることもできる。どうやら、何人かの読者がJoshにpath length属性の存在を指摘してくれたらしい。
属性により、path lengthのオーバーライドを指定できる。だから、ここで100に設定している。path lengthを定義するとき、基本的にパスのための独自のスケールを作成している。ポリゴンは依然として実際のpath lengthが763だが、100として再定義している。ブラウザはすべてをスケールアップするための裏側での作業をするが、CSSでは、完全な周囲が100であるかのように行動できる。
彼はそれが気に入らないと確信していない。設定するのが簡単で、意図しない結果がないが、基本的にブラウザにパスが実際とは違うふりをするように言っている。そして、それはファンキーに感じる。良い呼び出し。それはクールなトリックだ。
SVGの力と今後の学習
SVGの力。この投稿での私の目標は、SVGが何であるかについての高レベルな理解を与え、自分の作業で使い始められるクールなトリックをいくつか共有することだった。しかし、できることはもっとたくさんある。私たちは表面をかすっただけだ。
彼はこのすべてについて、特にアニメーションについて、完全なコースを作成している。でも、SVGはもちろんそれの大きな部分だ。そして再び、試してみたいなら、説明にリンクがある。Joshがやったことはすべてすべてのセント以上の価値があった。彼の他の信じられないコースのいずれかをチェックすることを非常に、非常に推奨する。
彼のCSS for JS Devsは伝説的だ。彼のJoy of Reactは私が今まで読んだ最高のReactコースの一つだ。Joshは自分が何をやっているか知っている。彼のものをチェックすることを非常に、非常に推奨する。また別の素晴らしい記事を書いてくれた彼に感謝する。皆さんがこれを私と同じくらい楽しんでくれることを願っている。
少なくとも、私は突然SVGをかなりよく理解するようになった。これは私にとって大きな助けになった。あなたにとっても助けになることを願っている。次回まで。あなたのパスを描き続けてくれ。
コメント