新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 SVGとはなにか？ (02:08) 無料公開中
- 概要
- デモ
- 必要となる知識
- レッスンで使用するツール
-
#02 インラインSVGを使ってみよう (03:00) 無料公開中
- <svg>
- <rect>
- 閉じタグについて
- 図形の重なりについて
-
#03 viewBoxの設定をしてみよう (01:59) 無料公開中
- viewBox
-
#04 fillとstrokeの設定をしてみよう (02:41)
- fill
- 色の指定方法（色名、16進数、rgb、rgba）
- stroke
- stroke-width
- stroke-dasharray
-
#05 style属性を使ってみよう (02:59)
- style属性
- <defs>
- styleの設定
-
#06 gでグループ化してみよう (01:40)
- <g>
-
#07 linearGradientを設定してみよう (02:51)
- <linearGradient>
- <stop>
- グラデーションの方向
-
#08 radialGradientを設定してみよう (01:39)
- <radialGradient>
-
#09 line, circle, ellipseを使ってみよう (02:48)
- <rect>の属性
- <line>
- <circle>
- <ellipse>
-
#10 polyline, polygon, pathを使おう (02:51)
- <polyline>
- <polygon>
- <path>
-
#11 textを使ってみよう (01:23)
- <text>
-
#12 transform属性を使ってみよう (02:59)
- transform
- translate
- rotate
- skewX, skewY
- scale
-
#13 animateを使ってみよう (02:31)
- <animate>
- アニメーション制御のための属性（attributeName, from, to, dur, repeatCount, begin）
-
#14 JavaScriptと連携してみよう (02:40)
- JavaScriptとの連携（onload）
