さらに多くのSVGトリック – Codepen

SVGには非常に多くのトリックがあります。それは本当にWeb用に文字通り設計されたフル機能の描画APIですが、それを本当に理解していないことも、十分に理解したり、十分に理解したりする人はほとんどいません。ヘック、私も それについての本を書きました、そして私はしません。当時、アイコンにSVGを使用してもらうだけで、困難な戦いのように感じられましたが、ありがたいことに、勝ったと思います。

最近私の机を渡ったクールなSVGの例を見てみましょう。

SVG形状の内側ストロークをアニメーション化します

クリストファー・カーク・ニールセンは、その良いリマインダーであるさまざまなデモを持っています stroke アニメーション可能です（幅のように）。これは、いくつかのクールな効果をもたらすことができます。 このデモ ストロークが内側のみに移動し、形を埋めるクラシックなもののように見えます。

クロムのようなブラウザが過去数年でしかなかった GPU加速SVGアニメーション、このようなものを本当に滑らかにします。

SVGビューボックスパディング

明確にするために、 viewBox SVGには実際にはパディングがありません。しかし、考えることは重要なことです。チュアンは、あなたが10°10の領域を経由して作るならば、 viewBox、次にa それはその10〜10領域を埋めます stroke その周りでは、ストロークは半分切断されます。それは、ストロークがSVGの形状の端にまたがるからです。したがって、あなたは形の座標を持って猿を否定しなければならないか、あなたは次のように調整しなければなりません viewBox それを処理するために。チュアンの考え方は、プロセッサにそれを処理できるようにします。

viewBox="0 0 10 10 padding .5"

/* translates to */

viewBox="-.5 -.5 11 11"

賢い考え、本当に。 CSS Doodleツールはそれを行うことができます。

それで…CSSにSVGサークルの半径を設定できますか？

ポール・ヘバートの質問に対する非常に基本的な答えは、次のとおりです。 ええ、完全に。 あなたがこれを持っている場合のように：

次のようなCSSの半径を調整できます。

circle {
  r: 20;
}

毎日見ているCSSではありませんが、ええ、それはまったく問題ありません。しかし、パウロのポイントはそれです 通常 SVGコードで半径を設定しますが、CSSコードで必要になる場合があります。同様に、それらを維持する方法 同期 良いです。 ポールのデモで、彼はSVGの半径さえまったく設定していないようです。 --radius カスタムプロパティは、これらのパーセンテージメーターを機能させるために必要な他の計算でそれを使用します。

SVGパスの理解

SVGの要素は、形状描画要素の中で最も複雑です。実際、私が理解しているように、他のすべての要素はとにかくパス上の単なる構文糖です。私はかつてそれを学び、それを理解していたときにイラスト付きガイドを書きました。しかし、Nanda Syahrasyadは私を簡単に中に入れてくれました SVGパスの理解。

トリックは、コマンドを理解することです。最終的にはかなり理解できます。彼らは「ペンを拾ってここに移動してから、ここに線を引く」または「あなたがいるところから始めて、この方向にペンを動かしてください」または「これらの他の2つのポイントを本質的に重力極として使用して、ここからそこに曲線を描く」のようなものです。

あなたがそれに入ると、あなたはあなた自身（息をのむ）あなた自身の形を描くことに気付くでしょう。私はナンダのオープナーが大好きです：

あなたがそのようなベンディングのお尻ボタンを構築しているなら、あなたは一種のレベルのフロントエンド開発者のようなものだと思います。

SVGには追加のポインターイベントプロパティがあります

あなたが私のようであれば、あなたは考えています pointer-events 設定に使用するものとしてCSSで none たまに。多分あなたはいくつかの色のオーバーレイを設定します

.foo {
  pointer-events: visiblePainted;        
}