From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/element/animate/index.html | 103 ++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 files/ja/web/svg/element/animate/index.html (limited to 'files/ja/web/svg/element/animate') diff --git a/files/ja/web/svg/element/animate/index.html b/files/ja/web/svg/element/animate/index.html new file mode 100644 index 0000000000..4f76295cdb --- /dev/null +++ b/files/ja/web/svg/element/animate/index.html @@ -0,0 +1,103 @@ +--- +title: +slug: Web/SVG/Element/animate +tags: + - Element + - SVG + - SVG Animation + - SVG アニメーション +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +

SVG の <animate> 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。

+ +
+ + +
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect width="10" height="10">
+    <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
+  </rect>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 150, '100%')}}

+
+ +

属性

+ +

アニメーション属性

+ +
+
アニメーションタイミング属性
+
{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
+
アニメーション値属性
+
{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}
+
その他のアニメーション属性
+
特に重要なもの: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
+
アニメーションイベント属性
+
特に重要なもの: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}
+
+ +

グローバル属性

+ +
+
コア属性
+
特に重要なもの: {{SVGAttr('id')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
イベント属性
+
グローバルイベント属性, 文書要素イベント属性
+
+ +

使用上の注意

+ +

この要素は {{domxref("SVGAnimateElement")}} インターフェイスを実装しています。

+ +

アクセシビリティの考慮事項

+ +

点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。

+ +

アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 Reduced Motion Media Query を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}}{{Spec2("SVG Animations 2")}}変更なし
{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("svg.elements.animate")}}

+
-- cgit v1.2.3-54-g00ecf