SVGの操作：
SVGオブジェクトの状態を変える
指定したSVGオブジェクトの状態を変える。CSSのtransitionと併用すればアニメーションも可能。
Node
SVG Nodeを渡す id値を文字列で指定してもよい
String1
オブジェクトの種類か class を指定 path・rect・circle・ellipse・line・polygon・polyline
String2
設定する部位を指定 ※stroke-width のようにハイフン付きの指定でも可
- fill
- fillOpacity
- stroke
- strokeOpacity
- strokeWidth
- strokeDasharray
- strokeDashoffset
- strokeLinecap
- strokeLinejoin
String3
オブジェクトの状態を指定する 指定方法はCSS仕様に準拠 ／ 数値の場合には数値でも可
●必須引数 ●オプション引数(省略可能)
記述例
$svgSetObjects(SVG Node, 'path', 'fill', '#31B1BC')
$svgSetObjects('SVG_id', 'circle1', 'strokeWidth', '12')
$svgSetObjects(SVG Node, 'line', 'stroke-dasharray', '10 2')
動作サンプル
SVG内の指定した種類のオブジェクトNodeの状態を変更する。
Javascript :
$svgSetObjects('samplesvg','set_1','fill','#DEC6CE');
$svgSetObjects('samplesvg','path','fill','#BD8E9E');
$svgSetObjects('samplesvg','line','stroke','#BD8E9E'); $svgSetObjects('samplesvg','line','strokeOpacity','0.5');
$svgSetObjects('samplesvg','set_2','strokeDasharray','7 3'); $svgSetObjects('samplesvg','set_2','stroke','#BD8E9E');
CSS transition を併用したロールオーバーアニメーション。
HTML :
<a href="─" onmouseover="$svgSetObjects('samplesvg2','path','fill','#31B1BC')" onmouseout="$svgSetObjects('samplesvg2','path','fill','#c6dbde')">
<svg id="samplesvg2" ──>
<path fill="#c6bde" d="──">
</svg>
</a>
Sass :
a {
svg path {
transition: fill 0.5s;
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。