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/a/index.html | 150 +++++++++++ files/ja/web/svg/element/animate/index.html | 103 +++++++ files/ja/web/svg/element/animatecolor/index.html | 86 ++++++ files/ja/web/svg/element/animatemotion/index.html | 120 +++++++++ .../ja/web/svg/element/animatetransform/index.html | 99 +++++++ files/ja/web/svg/element/circle/index.html | 90 +++++++ files/ja/web/svg/element/defs/index.html | 85 ++++++ files/ja/web/svg/element/desc/index.html | 72 +++++ files/ja/web/svg/element/ellipse/index.html | 110 ++++++++ files/ja/web/svg/element/fecolormatrix/index.html | 217 +++++++++++++++ files/ja/web/svg/element/fedropshadow/index.html | 104 +++++++ files/ja/web/svg/element/foreignobject/index.html | 113 ++++++++ files/ja/web/svg/element/g/index.html | 87 ++++++ files/ja/web/svg/element/hatchpath/index.html | 72 +++++ files/ja/web/svg/element/image/index.html | 102 +++++++ files/ja/web/svg/element/index.html | 300 +++++++++++++++++++++ files/ja/web/svg/element/line/index.html | 106 ++++++++ files/ja/web/svg/element/lineargradient/index.html | 89 ++++++ files/ja/web/svg/element/mask/index.html | 112 ++++++++ files/ja/web/svg/element/metadata/index.html | 64 +++++ files/ja/web/svg/element/mpath/index.html | 108 ++++++++ files/ja/web/svg/element/path/index.html | 107 ++++++++ files/ja/web/svg/element/pattern/index.html | 120 +++++++++ files/ja/web/svg/element/polygon/index.html | 88 ++++++ files/ja/web/svg/element/polyline/index.html | 85 ++++++ files/ja/web/svg/element/radialgradient/index.html | 107 ++++++++ files/ja/web/svg/element/rect/index.html | 95 +++++++ files/ja/web/svg/element/script/index.html | 107 ++++++++ files/ja/web/svg/element/set/index.html | 81 ++++++ files/ja/web/svg/element/solidcolor/index.html | 85 ++++++ files/ja/web/svg/element/svg/index.html | 125 +++++++++ files/ja/web/svg/element/switch/index.html | 98 +++++++ files/ja/web/svg/element/text/index.html | 159 +++++++++++ files/ja/web/svg/element/title/index.html | 84 ++++++ files/ja/web/svg/element/tspan/index.html | 111 ++++++++ files/ja/web/svg/element/use/index.html | 129 +++++++++ 36 files changed, 3970 insertions(+) create mode 100644 files/ja/web/svg/element/a/index.html create mode 100644 files/ja/web/svg/element/animate/index.html create mode 100644 files/ja/web/svg/element/animatecolor/index.html create mode 100644 files/ja/web/svg/element/animatemotion/index.html create mode 100644 files/ja/web/svg/element/animatetransform/index.html create mode 100644 files/ja/web/svg/element/circle/index.html create mode 100644 files/ja/web/svg/element/defs/index.html create mode 100644 files/ja/web/svg/element/desc/index.html create mode 100644 files/ja/web/svg/element/ellipse/index.html create mode 100644 files/ja/web/svg/element/fecolormatrix/index.html create mode 100644 files/ja/web/svg/element/fedropshadow/index.html create mode 100644 files/ja/web/svg/element/foreignobject/index.html create mode 100644 files/ja/web/svg/element/g/index.html create mode 100644 files/ja/web/svg/element/hatchpath/index.html create mode 100644 files/ja/web/svg/element/image/index.html create mode 100644 files/ja/web/svg/element/index.html create mode 100644 files/ja/web/svg/element/line/index.html create mode 100644 files/ja/web/svg/element/lineargradient/index.html create mode 100644 files/ja/web/svg/element/mask/index.html create mode 100644 files/ja/web/svg/element/metadata/index.html create mode 100644 files/ja/web/svg/element/mpath/index.html create mode 100644 files/ja/web/svg/element/path/index.html create mode 100644 files/ja/web/svg/element/pattern/index.html create mode 100644 files/ja/web/svg/element/polygon/index.html create mode 100644 files/ja/web/svg/element/polyline/index.html create mode 100644 files/ja/web/svg/element/radialgradient/index.html create mode 100644 files/ja/web/svg/element/rect/index.html create mode 100644 files/ja/web/svg/element/script/index.html create mode 100644 files/ja/web/svg/element/set/index.html create mode 100644 files/ja/web/svg/element/solidcolor/index.html create mode 100644 files/ja/web/svg/element/svg/index.html create mode 100644 files/ja/web/svg/element/switch/index.html create mode 100644 files/ja/web/svg/element/text/index.html create mode 100644 files/ja/web/svg/element/title/index.html create mode 100644 files/ja/web/svg/element/tspan/index.html create mode 100644 files/ja/web/svg/element/use/index.html (limited to 'files/ja/web/svg/element') diff --git a/files/ja/web/svg/element/a/index.html b/files/ja/web/svg/element/a/index.html new file mode 100644 index 0000000000..2335081323 --- /dev/null +++ b/files/ja/web/svg/element/a/index.html @@ -0,0 +1,150 @@ +--- +title: +slug: Web/SVG/Element/a +tags: + - Element + - Reference + - SVG + - SVG Container + - SVG コンテナー + - 要素 +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

<a> は SVG の要素で、他のウェブページ、ファイル、同じページ内の場所、メールアドレス、その他の URL へのハイパーリンクを生成します。 HTML の {{htmlelement("a")}} 要素ととても良く似ています。

+ +

SVG の <a> 要素はコンテナーですので、 (HTML のような) テキストを囲むものだけでなく、図形を囲むリンクを生成することもできます。

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- 図形を囲むリンク -->
+  <a href="/docs/Web/SVG/Element/circle">
+    <circle cx="50" cy="40" r="35"/>
+  </a>
+
+  <!-- テキストを囲むリンク -->
+  <a href="/docs/Web/SVG/Element/text">
+    <text x="50" y="90" text-anchor="middle">
+      &lt;circle&gt;
+    </text>
+  </a>
+</svg>
+ +
/* SVG ではリンクに既定の視覚スタイルがないので、
+   何かを追加するのがいいでしょう */
+
+@namespace svg url(http://www.w3.org/2000/svg);
+/* SVG の <a> 要素のみを選択し、 HTML を除外するために必要。
+   下記の警告を参照 */
+
+svg|a:link, svg|a:visited {
+  cursor: pointer;
+}
+
+svg|a text,
+text svg|a {
+  fill: blue; /* テキストであっても、 SVG は塗りつぶし色を使用する */
+  text-decoration: underline;
+}
+
+svg|a:hover, svg|a:active {
+  outline: dotted 1px blue;
+}
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +
+

この要素は HTML の <a> 要素と同じタグ名なので、 a を CSS や {{domxref("Document.querySelector", "querySelector")}} で選択すると、誤った種類の要素に適用してしまう可能性があります。 @namespace 規則で二つを区別してみてください。

+
+ +

属性

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
移動するのではなく {{Glossary("URL")}} をダウンロードするようブラウザーに指示しますので、ユーザーにローカルファイルとして保存するよう促します。
+ 値種別: <string> ; 既定値: none; アニメーション: no
+
{{SVGAttr("href")}}
+
ハイパーリンクが指す先の {{Glossary("URL")}} または URL フラグメントです。
+ 値種別: <URL> ; 既定値: none; アニメーション: yes
+
{{htmlattrxref("hreflang", "a")}}
+
ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。
+ 値種別: <string> ; 既定値: none; アニメーション: yes
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
空白区切りの URL のリストで、ハイパーリンクをたどるとき、 {{HTTPMethod("POST")}} リクエストで本文が PING であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 {{domxref("Navigator.sendBeacon()")}} を参照してください。
+ 値種別: <list-of-URLs> ; 既定値: none; アニメーション: no
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
どのリファラーをアクセス先の {{Glossary("URL")}} に送信するかです。
+ 値種別: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; 既定値: none; アニメーション: no
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
対象のオブジェクトとリンクしているオブジェクトの関係です。
+ 値種別: <list-of-Link-Types> ; 既定値: none; アニメーション: yes
+
{{SVGAttr("target")}}
+
リンクされた {{Glossary("URL")}} の表示先です。
+ 値種別: _self|_parent|_top|_blank|<name> ; 既定値: _self; アニメーション: yes
+
{{htmlattrxref("type", "a")}}
+
リンク先の URL の {{Glossary("MIME type", "MIME タイプ")}}です。
+ 値種別: <string> ; 既定値: none; アニメーション: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。
+ 値種別: <URL> ; 既定値: none; アニメーション: yes
+
+ +

グローバル属性

+ +
+
コア属性
+
主なもの: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
条件付き処理属性
+
主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
イベント属性
+
グローバルイベント属性, 文書要素イベント属性, グラフィックイベント属性
+
プレゼンテーション属性
+
主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink 属性
+
主なもの: {{SVGAttr("xlink:title")}}
+
ARIA 属性
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

使用上の注意

+ +

{{svginfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}{{SVGAttr("xlink:href")}} 属性を {{SVGAttr("href")}} で置き換え
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

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")}}

+
diff --git a/files/ja/web/svg/element/animatecolor/index.html b/files/ja/web/svg/element/animatecolor/index.html new file mode 100644 index 0000000000..8c5927ffe4 --- /dev/null +++ b/files/ja/web/svg/element/animatecolor/index.html @@ -0,0 +1,86 @@ +--- +title: animateColor +slug: Web/SVG/Element/animateColor +tags: + - Deprecated + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateColor +--- +
{{SVGRef}}{{deprecated_header}}
+ +
+

この要素はSVG1.1仕様（第2版）で廃止され、将来のSVGのバージョンで削除される可能性があります。 この要素は {{ SVGElement("animate") }} 要素に置き換えられ、FirefoxやInternet Explorerでは実装されておりません。SVGファイル製作者はこの要素の代わりに{{ SVGElement("animate") }}要素を使うべきです。

+
+ +

概要

+ +

animateColor要素は時間経過による色の変換を指定します。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

例

+ +

» animateColor.svg

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ + + +

DOM インターフェース

+ +

この要素は SVGAnimateColorElement インターフェースを提供します。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}}{{Spec2("SVG1.1")}}最初の定義
+ +

ブラウザー互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/svg/element/animatemotion/index.html b/files/ja/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..cfc03811f9 --- /dev/null +++ b/files/ja/web/svg/element/animatemotion/index.html @@ -0,0 +1,120 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateMotion +--- +
{{SVGRef}}
+ +

SVG の <animateMotion> 要素は、ある要素がモーションパスに沿って移動する方法を定義します。

+ +
+

注: 既存のパスを再利用するには、 <animateMotion> 要素内の {{SVGElement("mpath")}} 要素を {{SVGAttr("path")}} 属性の代わりに使用する必要があります。

+
+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="lightgrey"
+    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+
+  <circle r="5" fill="red">
+    <animateMotion dur="10s" repeatCount="indefinite"
+      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+  </circle>
+</svg>
+ +

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

+
+ +

使用場面

+ +

{{svginfo}}

+ +

属性

+ +
+
{{SVGAttr("keyPoints")}}
+
この属性は [0,1] の範囲で、それぞれの {{SVGAttr("keyTimes")}} に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。
+ 値の型: <number>*; Default value: none; Animatable: no
+
{{SVGAttr("path")}}
+
この属性は、 {{SVGAttr('d')}} 属性と同じ構文を使用して、モーションパスを定義します。
+ 値の型: <string>; Default value: none; Animatable: no
+
{{SVGAttr("rotate")}}
+
この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。
+ 値の型: <number>|auto|auto-reverse; Default value: 0; Animatable: no
+
+ +
+

注: <animateMotion> においては、 {{SVGAttr("calcMode")}} 属性の既定値は paced です。

+
+ +

アニメーション属性

+ +
+
アニメーションタイミング属性
+
{{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("SVGAnimateMotionElement")}} インターフェイスを実装しています。

+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/svg/element/animatetransform/index.html b/files/ja/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..341c299fdb --- /dev/null +++ b/files/ja/web/svg/element/animatetransform/index.html @@ -0,0 +1,99 @@ +--- +title: animateTransform +slug: Web/SVG/Element/animateTransform +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateTransform +--- +
{{SVGRef}}
+ +

animateTransform 要素は、 ターゲット要素に対して変換属性をアニメーション化し、これにより変形、スケーリング、回転およびまたはゆがみのアニメーションを制御することができます。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

例

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+    <polygon points="60,30 90,90 30,90">
+        <animateTransform attributeName="transform"
+                          attributeType="XML"
+                          type="rotate"
+                          from="0 60 70"
+                          to="360 60 70"
+                          dur="10s"
+                          repeatCount="indefinite"/>
+    </polygon>
+</svg>
+ +

ライブサンプル

+ +

{{ EmbedLiveSample('例','120','120') }}

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ + + +

DOM インターフェース

+ +

この属性は SVGAnimateTransformElement インターフェースを提供します。

+ +

 

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}{{Spec2("SVG Animations 2")}}変更なし
{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザ互換性

+ + + +

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

diff --git a/files/ja/web/svg/element/circle/index.html b/files/ja/web/svg/element/circle/index.html new file mode 100644 index 0000000000..16c38d5ac5 --- /dev/null +++ b/files/ja/web/svg/element/circle/index.html @@ -0,0 +1,90 @@ +--- +title: circle +slug: Web/SVG/Element/circle +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

<circle> SVG 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

属性値

+ +

グローバル属性

+ + + +

専用属性

+ + + +

DOM インターフェイス

+ +

この要素は SVGCircleElement インターフェイスを実装しています。

+ +

例

+ +

SVG

+ +
+
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100"/>
+</svg>
+
+
+ +

出力

+ +

{{EmbedLiveSample('Example', 200, 200)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("SVG2", "shapes.html#CircleElement", "<circle>")}}{{Spec2("SVG2")}} 
{{SpecName("SVG1.1", "shapes.html#CircleElement", "<circle>")}}{{Spec2("SVG1.1")}}初期定義
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/svg/element/defs/index.html b/files/ja/web/svg/element/defs/index.html new file mode 100644 index 0000000000..e9fb934e13 --- /dev/null +++ b/files/ja/web/svg/element/defs/index.html @@ -0,0 +1,85 @@ +--- +title: defs +slug: Web/SVG/Element/defs +tags: + - SVG + - SVG Container +translation_of: Web/SVG/Element/defs +--- +
{{SVGRef}}
+ +

SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されています。defs要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。defs要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、{{ SVGElement("use") }}要素を使用します。

+ +

利用コンテキスト

+ +

{{svginfo}}

+ +

例

+ +
<svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="Gradient01">
+      <stop offset="20%" stop-color="#39F" />
+      <stop offset="90%" stop-color="#F3F" />
+    </linearGradient>
+  </defs>
+
+  <rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)"  />
+</svg>
+
+ +

属性

+ +

グローバル属性

+ + + +

スペシフィック属性

+ +

スペシフィック属性はありません

+ +

DOM インタフェース

+ +

この要素は SVGDefsElement インタフェースを実装しています。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("SVG2", "struct.html#Head", "<defs>")}}{{Spec2("SVG2")}}変更なし
{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}{{Spec2("SVG1.1")}}最初の定義
+ +

ブラウザ互換性

+ + + +

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

diff --git a/files/ja/web/svg/element/desc/index.html b/files/ja/web/svg/element/desc/index.html new file mode 100644 index 0000000000..584620f1b0 --- /dev/null +++ b/files/ja/web/svg/element/desc/index.html @@ -0,0 +1,72 @@ +--- +title: desc +slug: Web/SVG/Element/desc +tags: + - Element + - SVG + - SVG Descriptive +translation_of: Web/SVG/Element/desc +--- +
{{SVGRef}}
+ +

SVG描画における各コンテナ要素またはグラフィック要素は、説明がテキストのみの <desc> 要素を用いる説明を供給することができます。

+ +

現在の SVG ドキュメントが視覚メディア上で SVG としてレンダリングされるとき、<desc> 要素はグラフィックとしてレンダリングされません。 代替プレゼンテーションは、<desc> 要素を表示するが {{SVGElement("path")}} 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方が可能です。<desc> 要素は一般に SVG ドキュメントのアクセシビリティを向上させます。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +

なし

+ +

DOM インターフェイス

+ +

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

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'struct.html#DescriptionAndTitleElements', '<desc>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<desc>')}}{{Spec2('SVG1.1')}}初期の定義
+ +

ブラウザー互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/svg/element/ellipse/index.html b/files/ja/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..cb9ab982f7 --- /dev/null +++ b/files/ja/web/svg/element/ellipse/index.html @@ -0,0 +1,110 @@ +--- +title: ellipse +slug: Web/SVG/Element/ellipse +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/ellipse +--- +
{{SVGRef}}
+ +

ellipse 要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。

+ +
+

注記: 楕円要素は楕円の傾きを指定することはできません (例えば、45 度の角度で傾斜した楕円を描画したい場合)、しかし {{SVGAttr("transform")}} 属性を使用することで回転させることは可能です。

+
+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="100" cy="50" rx="100" ry="50" />
+</svg>
+ +

{{EmbedLiveSample('LiveSample', 100, '100%')}}

+
+ +

属性

+ +
+
{{SVGAttr("cx")}}
+
楕円の x 座標。
+ Value type: <length>|<percentage> ; デフォルト値: 0; アニメーション: yes
+
{{SVGAttr("cy")}}
+
楕円の y 座標。
+ Value type: <length>|<percentage> ; デフォルト値: 0; アニメーション: yes
+
{{SVGAttr("rx")}}
+
x 軸の半径。
+ Value type: auto|<length>|<percentage> ; デフォルト値: auto; アニメーション: yes
+
{{SVGAttr("ry")}}
+
y 軸の半径。
+ Value type: auto|<length>|<percentage> ; デフォルト値: auto; アニメーション: yes
+
{{SVGAttr("pathLength")}}
+
この属性は、使用単位での単位合計パス長さを指定します。
+ Value type: <number> ; デフォルト値: none; アニメーション: yes
+
+ +
+

注記: SVG2 以降、cx、cy、rx、ry は、Geometry Properties であり、これらの属性は要素の CSS プロパティとして使用することもできます。

+
+ +

グローバル属性

+ +
+
コア属性
+
注目すべき属性: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
スタイリング属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
条件処理属性
+
注目すべき属性: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
イベント属性
+
グローバルイベント属性、Graphical イベント属性
+
プレゼンテーション属性
+
注目すべき属性: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA 属性
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

使用可能な場所

+ +

{{svginfo}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG2')}}rx と ry に auto を追加
{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG1.1')}}最初の定義
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/svg/element/fecolormatrix/index.html b/files/ja/web/svg/element/fecolormatrix/index.html new file mode 100644 index 0000000000..d463a68ac9 --- /dev/null +++ b/files/ja/web/svg/element/fecolormatrix/index.html @@ -0,0 +1,217 @@ +--- +title: +slug: Web/SVG/Element/feColorMatrix +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feColorMatrix +--- +
{{SVGRef}}
+ +

<feColorMatrix> は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 [R,G,B,A] は 5 x 5 の行列で行列乗算され、新しい色 [R',G',B',A'] を生成します。

+ +
+

基本的な記号 ' は、数学で変換された結果を表すために使用されます。

+
+ +
| R' |     | r1 r2 r3 r4 r5 |   | R |
+| G' |     | g1 g2 g3 g4 g5 |   | G |
+| B' |  =  | b1 b2 b3 b4 b5 | * | B |
+| A' |     | a1 a2 a3 a4 a5 |   | A |
+| 1  |     | 0  0  0  0  1 |   | 1 |
+ +

簡略化すると、新しいピクセルの各色のチャンネルがどのように計算されるかを以下に示します。最後の行は値が一定なので無視されます。

+ +
R' = r1*R + r2*G + r3*B + r4*A + r5
+G' = g1*R + g2*G + g3*B + g4*A + g5
+B' = b1*R + b2*G + b3*B + b4*A + b5
+A' = a1*R + a2*G + a3*B + a4*A + a5
+
+ +

新しいピクセルの赤の量、すなわち R' に注目すると下記のようになります。

+ +

これは以下の値の合計です。

+ +
    +
  • 旧ピクセルの赤成分 R の r1 倍
    • +
  • 旧ピクセルの緑成分 G の r2 倍
    • +
  • 旧ピクセルの青成分 B の r3 倍
    • +
  • 旧ピクセルのアルファ成分 A の r4 倍
    • +
  • 加えて加算値の r5
    • +
+ +

これらの指定された数量は任意の実数を取ることができますが、最終的な R' は 0 ～ 1 の間に丸められます。 G', B', A' についても同様です。

+ +
R'      =      r1 * R      +        r2 * G      +       r3 * B      +       r4 * A       +       r5
+New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]
+ +

例えば、真っ黒な画像をより赤くしたい場合は、 r5 を正の実数 x とすれば、新しい画像の各画素の赤さを x だけ増加させます。

+ +

単位行列 は次のようになります。

+ +
     R G B A W
+R' | 1 0 0 0 0 |
+G' | 0 1 0 0 0 |
+B' | 0 0 1 0 0 |
+A' | 0 0 0 1 0 |
+
+ +

この中では、新しい値はすべて古い値のちょうど 1 倍の値であり、それ以外は何も加えられていません。ここから行列の操作を始めることをお勧めします。

+ +

使用場面

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

固有の属性

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("type")}}
    • +
  • {{SVGAttr("values")}}
    • +
+ +

DOM インターフェイス

+ +

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

+ +

例

+ +

SVG

+ +
<svg width="100%" height="100%" viewBox="0 0 150 500"
+    preserveAspectRatio="xMidYMid meet"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- ref -->
+  <defs>
+    <g id="circles">
+      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
+      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
+      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
+    </g>
+  </defs>
+  <use href="#circles" />
+  <text x="70" y="50">Reference</text>
+
+  <!-- identity matrix -->
+  <filter id="colorMeTheSame">
+    <feColorMatrix in="SourceGraphic"
+        type="matrix"
+        values="1 0 0 0 0
+                0 1 0 0 0
+                0 0 1 0 0
+                0 0 0 1 0" />
+   </filter>
+  <use href="#circles" transform="translate(0 70)" filter="url(#colorMeTheSame)" />
+  <text x="70" y="120">Identity matrix</text>
+
+  <!-- Combine RGB into green matrix -->
+  <filter id="colorMeGreen">
+    <feColorMatrix in="SourceGraphic"
+        type="matrix"
+        values="0 0 0 0 0
+                1 1 1 1 0
+                0 0 0 0 0
+                0 0 0 1 0" />
+  </filter>
+  <use href="#circles" transform="translate(0 140)" filter="url(#colorMeGreen)" />
+  <text x="70" y="190">rgbToGreen</text>
+
+  <!-- saturate -->
+  <filter id="colorMeSaturate">
+    <feColorMatrix in="SourceGraphic"
+        type="saturate"
+        values="0.2" />
+  </filter>
+  <use href="#circles" transform="translate(0 210)" filter="url(#colorMeSaturate)" />
+  <text x="70" y="260">saturate</text>
+
+  <!-- hueRotate -->
+  <filter id="colorMeHueRotate">
+    <feColorMatrix in="SourceGraphic"
+        type="hueRotate"
+        values="180" />
+  </filter>
+  <use href="#circles" transform="translate(0 280)" filter="url(#colorMeHueRotate)" />
+  <text x="70" y="330">hueRotate</text>
+
+  <!-- luminanceToAlpha -->
+  <filter id="colorMeLTA">
+    <feColorMatrix in="SourceGraphic"
+        type="luminanceToAlpha" />
+  </filter>
+  <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
+  <text x="70" y="400">luminanceToAlpha</text>
+</svg>
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 700, "/files/4371/test.png")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Filters 1.0', '#feColorMatrixElement', '<feColorMatrix>')}}{{Spec2('Filters 1.0')}}変更なし
{{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '<feColorMatrix>')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • SVG チュートリアル: フィルター効果
    • +
diff --git a/files/ja/web/svg/element/fedropshadow/index.html b/files/ja/web/svg/element/fedropshadow/index.html new file mode 100644 index 0000000000..ddc3927577 --- /dev/null +++ b/files/ja/web/svg/element/fedropshadow/index.html @@ -0,0 +1,104 @@ +--- +title: +slug: Web/SVG/Element/feDropShadow +tags: + - Element + - Filters + - Reference + - SVG +translation_of: Web/SVG/Element/feDropShadow +--- +
{{SVGRef}}
+ +

SVG の <feDropShadow> フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは {{SVGElement('filter')}} 要素の中でのみ使用できます。

+ +

ドロップシャドウの色や不透明度は、 {{SVGAttr('flood-color')}} や {{SVGAttr('flood-opacity')}} の各プレゼンテーション属性を使用することで変更できます。

+ +
+ + +
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="shadow">
+      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
+    </filter>
+    <filter id="shadow2">
+      <feDropShadow dx="0" dy="0" stdDeviation="0.5"
+          flood-color="cyan"/>
+    </filter>
+    <filter id="shadow3">
+      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
+          flood-color="pink" flood-opacity="0.5"/>
+    </filter>
+  </defs>
+
+  <circle cx="5" cy="50%" r="4"
+      style="fill:pink; filter:url(#shadow);"/>
+
+  <circle cx="15" cy="50%" r="4"
+      style="fill:pink; filter:url(#shadow2);"/>
+
+  <circle cx="25" cy="50%" r="4"
+      style="fill:pink; filter:url(#shadow3);"/>
+</svg>
+ +

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

+
+ +

属性

+ +
+
{{SVGAttr("dx")}}
+
この属性は、ドロップシャドウの X 方向のオフセットを定義します。
+ 値の型: <number>; 既定値: 2; Animatable: yes
+
{{SVGAttr("dy")}}
+
この属性は、ドロップシャドウの Y 方向のオフセットを定義します。
+ 値の型: <number>; 既定値: 2; Animatable: yes
+
{{SVGAttr("stdDeviation")}}
+
この属性は、ドロップシャドウのぼかし操作の標準偏差を定義します。
+ 値の型: <number>; 既定値: 2; Animatable: yes
+
+ +

グローバル属性

+ +
+
コア属性
+
特に: {{SVGAttr('id')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
フィルタープリミティブ属性
+
{{SVGAttr('height')}}, {{SVGAttr('in')}}, {{SVGAttr('result')}}, {{SVGAttr('x')}}, {{SVGAttr('y')}}, {{SVGAttr('width')}}
+
プレゼンテーション属性
+
特に: {{SVGAttr('flood-color')}}, {{SVGAttr('flood-opacity')}}
+
+ +

使用上の注意

+ +

{{svginfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Filters 1.0", "#feDropShadowElement", "<feDropShadow>")}}{{Spec2("Filters 1.0")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/svg/element/foreignobject/index.html b/files/ja/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..00e38530a5 --- /dev/null +++ b/files/ja/web/svg/element/foreignobject/index.html @@ -0,0 +1,113 @@ +--- +title: +slug: Web/SVG/Element/foreignObject +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/foreignObject +--- +
{{SVGRef}}
+ +

<foreignObject> SVG 要素は、異なるユーザーエージェントによって描画されるグラフィックコンテンツを持つ外部XML名前空間を含めることを可能にします。含まれた外部グラフィックコンテンツは、SVG 変換や合成の対象となります。

+ +

The contents of foreignObject are assumed to be from a different namespace. Any SVG elements within a foreignObject will not be drawn, except in the situation where a properly defined SVG subdocument with a proper xmlns attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).

+ +

Usually, a foreignObject will be used in conjunction with the {{SVGElement("switch")}} element and the {{SVGAttr("requiredExtensions")}} attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.

+ +

利用可能な場所

+ +

{{svginfo}}

+ +

例

+ +
<svg width="400px" height="300px" viewBox="0 0 400 300"
+     xmlns="http://www.w3.org/2000/svg">
+  <desc>This example uses the 'switch' element to provide a
+        fallback graphical representation of a paragraph, if
+        XHTML is not supported.</desc>
+
+  <!-- The 'switch' element will process the first child element
+       whose testing attributes evaluate to true.-->
+  <switch>
+
+    <!-- Process the embedded XHTML if the requiredExtensions attribute
+         evaluates to true (i.e., the user agent supports XHTML
+         embedded within SVG). -->
+    <foreignObject width="100" height="50"
+                   requiredExtensions="http://www.w3.org/1999/xhtml">
+      <!-- XHTML content goes here -->
+      <body xmlns="http://www.w3.org/1999/xhtml">
+        <p>Here is a paragraph that requires word wrap</p>
+      </body>
+    </foreignObject>
+
+    <!-- Else, process the following alternate SVG.
+         Note that there are no testing attributes on the 'text' element.
+         If no testing attributes are provided, it is as if there
+         were testing attributes and they evaluated to true.-->
+    <text font-size="10" font-family="Verdana">
+      <tspan x="10" y="10">Here is a paragraph that</tspan>
+      <tspan x="10" y="20">requires word wrap.</tspan>
+    </text>
+  </switch>
+</svg>
+
+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{SVGAttr("x")}}
    • +
  • {{SVGAttr("y")}}
    • +
  • {{SVGAttr("width")}}
    • +
  • {{SVGAttr("height")}}
    • +
+ +

DOM インターフェイス

+ +

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

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG1.1')}}初期の定義
+ +

ブラウザー互換性

+ + + +

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

diff --git a/files/ja/web/svg/element/g/index.html b/files/ja/web/svg/element/g/index.html new file mode 100644 index 0000000000..7d49f5f3ed --- /dev/null +++ b/files/ja/web/svg/element/g/index.html @@ -0,0 +1,87 @@ +--- +title: g +slug: Web/SVG/Element/g +tags: + - Element + - Reference + - SVG + - SVG Container +translation_of: Web/SVG/Element/g +--- +
{{SVGRef}}
+ +

<g> SVG 要素は、他のSVG要素をグループ化するために用いられるコンテナです。

+ +

<g> 要素に適用された変形はその全ての子要素に対して実行されます。適用された属性は子要素に継承されます。加えて、多数のオブジェクトを グループかしておくと後に {{SVGElement("use")}} 要素で参照することができます。

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Using g to inherit presentation attributes -->
+  <g fill="white" stroke="green" stroke-width="5">
+    <circle cx="40" cy="40" r="25" />
+    <circle cx="60" cy="60" r="25" />
+  </g>
+</svg>
+ +

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

+
+ +

属性

+ +

この要素はグローバル属性のみを含みます。

+ +

グローバル属性

+ +
+
コア属性
+
特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
スタイリング属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
条件処理属性
+
特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
イベント属性
+
グローバルイベント属性, グラフィカルイベント属性
+
プレゼンテーション属性
+
特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria属性
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

利用ノート

+ +

{{svginfo}}

+ + +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("SVG2", "struct.html#GElement", "<g>")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "struct.html#Groups", "<g>")}}{{Spec2("SVG1.1")}}最初の定義
+ +

ブラウザ実装状況

+ + + +

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

diff --git a/files/ja/web/svg/element/hatchpath/index.html b/files/ja/web/svg/element/hatchpath/index.html new file mode 100644 index 0000000000..0b91496a8d --- /dev/null +++ b/files/ja/web/svg/element/hatchpath/index.html @@ -0,0 +1,72 @@ +--- +title: +slug: Web/SVG/Element/hatchpath +tags: + - Element + - Experimental + - Filters + - Reference + - SVG +translation_of: Web/SVG/Element/hatchpath +--- +
{{SVGRef}}{{SeeCompatTable}}
+ +

<hatchpath> は SVG の要素で、 {{SVGElement("hatch")}} 要素で使用されるハッチパスを定義します。

+ +

使用場所

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

固有の属性

+ +
    +
  • {{SVGAttr("d")}}
    • +
  • {{SVGAttr("offset")}}
    • +
+ +

DOM インターフェイス

+ +

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

+ +

例

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5"
+        rotate="135">
+      <hatchpath stroke="#a080ff" stroke-width="2"/>
+    </hatch>
+  </defs>
+
+  <rect fill="url(#hatch)" stroke="black" stroke-width="2"
+     x="10%" y="10%" width="80%" height="80%" />
+</svg>
+ +

結果

+ +

{{EmbedLiveSample("Example", 200, 200)}}

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ +
    +
  • {{SVGElement("hatch")}}
    • +
diff --git a/files/ja/web/svg/element/image/index.html b/files/ja/web/svg/element/image/index.html new file mode 100644 index 0000000000..874f1d59ac --- /dev/null +++ b/files/ja/web/svg/element/image/index.html @@ -0,0 +1,102 @@ +--- +title: +slug: Web/SVG/Element/image +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/image +--- +
{{SVGRef}}
+ +

The <image> は SVG の要素で、 SVG 文書内に画像を含めます。これは{{glossary("raster image", "ラスター画像")}}ファイルや他の SVG ファイルを表示することができます。

+ +

SVG ソフトウェアが対応する必要がある画像形式は {{glossary("JPEG")}}, {{glossary("PNG")}}, および他の SVG ファイルです。アニメーション {{glossary("GIF")}} の動作は未定義です。

+ +

<image> で表示される SVG ファイルは画像として扱われます。外部リソースは読み込まれず、 {{cssxref(":visited")}} のスタイルは適用されず、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 {{SVGElement("use")}} を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 {{HTMLElement("object")}} を {{SVGElement("foreignObject")}} の中で使用してください。

+ +
+

注: HTML 仕様書は、解釈時に <image> を {{HTMLElement("img")}} の別名として定義しています。この仕様書の要素とその動作は SVG 文書またはインライン SVG 内のみのものです。

+
+ +

使用場所

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

固有の属性

+ +
    +
  • {{SVGAttr("x")}}: 原点から見た画像の水平位置です。
    • +
  • {{SVGAttr("y")}}: 原点から見た画像の垂直位置です。
    • +
  • {{SVGAttr("width")}}: 画像が描画される幅です。 HTML の <img> とは異なり、この属性は必須です。
    • +
  • {{SVGAttr("height")}}: 画像が描画される高さです。 HTML の <img> とは異なり、この属性は必須です。
    • +
  • {{SVGAttr("href")}} および {{SVGAttr("xlink:href")}}: 画像ファイルの URL を指します。
    • +
  • {{SVGAttr("preserveAspectRatio")}}: 画像の拡大縮小方法を制御し案す。
    • +
+ +

DOM インターフェイス

+ +

<image> は {{domxref("SVGImageElement")}} インターフェイスを実装しています。

+ +

例

+ +

SVG 内における PNG 画像の基本的な描画:

+ +

SVG

+ +
<svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
+</svg>
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 250, 260)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}{{Spec2('SVG2')}}height および width を省略可能とした
{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/svg/element/index.html b/files/ja/web/svg/element/index.html new file mode 100644 index 0000000000..d7373d9eac --- /dev/null +++ b/files/ja/web/svg/element/index.html @@ -0,0 +1,300 @@ +--- +title: SVG 要素リファレンス +slug: Web/SVG/Element +tags: + - Drawing + - Elements + - Responsive Design + - SVG + - SVG Reference + - SVG リファレンス + - Vector Graphics + - 'l10n:priority' + - ベクターグラフィック + - レスポンシブデザイン + - 描画 + - 要素 +translation_of: Web/SVG/Element +--- +

« SVG / SVG 属性リファレンス »

+ +

SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。

+ +

SVG 要素 A - Z

+ +
+

A

+ +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+ +

C

+ +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
+ +

D

+ +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
  • {{SVGElement("discard")}}
    • +
+ +

E

+ +
    +
  • {{SVGElement("ellipse")}}
    • +
+ +

F

+ +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feDropShadow")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+ +

G

+ +
    +
  • {{SVGElement("g")}}
    • +
+ +

H

+ +
    +
  • {{SVGElement("hatch")}}
    • +
  • {{SVGElement("hatchpath")}}
    • +
+ +

I

+ +
    +
  • {{SVGElement("image")}}
    • +
+ +

L

+ +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+ +

M

+ +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("mesh")}}
    • +
  • {{SVGElement("meshgradient")}}
    • +
  • {{SVGElement("meshpatch")}}
    • +
  • {{SVGElement("meshrow")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+ +

P

+ +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+ +

R

+ +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+ +

S

+ +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("solidcolor")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+ +

T

+ +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+ +

U

+ +
    +
  • {{SVGElement("unknown")}}
    • +
  • {{SVGElement("use")}}
    • +
+ +

V

+ +
    +
  • {{SVGElement("view")}}
    • +
+
+ +

SVG 要素一覧 (カテゴリー別)

+ +

アニメーション要素

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

基本シェイプ

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

コンテナー要素

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

説明的要素

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

フィルター構成要素

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

フォント要素

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

グラデーション要素

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

グラフィック要素

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+ +

グラフィック参照要素

+ +

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+ +

光源要素

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+ +

描画されない要素

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}

+ +

ペイントサーバー要素

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}

+ +

描画可能要素

+ +

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}

+ +

図形要素

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

構造的要素

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

テキストコンテンツ要素

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

テキストコンテンツの子要素

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

未分類の要素

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

+ +

廃止および非推奨の要素

+ +
+

警告: 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。ここに掲載しているのは情報提供だけの目的です。

+
+ +

A

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}

+ +

C

+ +

{{SVGElement("cursor")}}

+ +

F

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}

+ +

G

+ +

{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}

+ +

H

+ +

{{SVGElement("hkern")}}

+ +

M

+ +

{{SVGElement("missing-glyph")}}

+ +

T

+ +

{{SVGElement("tref")}}

+ +

V

+ +

{{SVGElement("vkern")}}

+ +

関連情報

+ + + +

{{SVGRef}}

diff --git a/files/ja/web/svg/element/line/index.html b/files/ja/web/svg/element/line/index.html new file mode 100644 index 0000000000..5446363585 --- /dev/null +++ b/files/ja/web/svg/element/line/index.html @@ -0,0 +1,106 @@ +--- +title: line +slug: Web/SVG/Element/line +tags: + - Element + - Reference + - SVG + - SVG Graphics + - 要素 +translation_of: Web/SVG/Element/line +--- +
{{SVGRef}}
+ +

<line> 要素は SVG の基本図形であり、2つの点をつなぐ直線を作成するために使用します。

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+
+  <!-- If you do not specify the stroke
+       color the line will not be visible -->
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

属性

+ +
+
{{SVGAttr('x1')}}
+
線の始点の X 座標を定義します。
+ 値の型: <length>|<percentage>|<number> ; 既定値: 0; アニメーション: 可
+
{{SVGAttr('x2')}}
+
線の終点の X 座標を定義します。
+ 値の型: <length>|<percentage>|<number> ; 既定値: 0; アニメーション: 可
+
{{SVGAttr('y1')}}
+
線の始点の Y 座標を定義します。
+ Value type: <length>|<percentage>|<number> ; 既定値: 0; アニメーション: 可
+
{{SVGAttr('y2')}}
+
線の終点の Y 座標を定義します。
+ Value type: <length>|<percentage>|<number> ; 既定値: 0; アニメーション: 可
+
{{SVGAttr("pathLength")}}
+
パス全体の長さをユーザーの単位で定義します。
+ Value type: <number> ; 既定値: none; アニメーション: 可
+
+ +

グローバル属性

+ +
+
コア属性
+
主なもの: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
条件付き処理属性
+
主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
イベント属性
+
グローバルイベント属性, グラフィックイベント属性
+
プレゼンテーション属性
+
主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA 属性
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

使用上のメモ

+ +

{{svginfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('SVG2', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG2')}}x1、y1、x2、y2 属性に{{cssxref("<length>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}を指定できるように変更
{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ +
    +
  • その他の SVG 基本図形: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • +
diff --git a/files/ja/web/svg/element/lineargradient/index.html b/files/ja/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..123c6809c3 --- /dev/null +++ b/files/ja/web/svg/element/lineargradient/index.html @@ -0,0 +1,89 @@ +--- +title: linearGradient +slug: Web/SVG/Element/linearGradient +tags: + - Element + - SVG + - SVG Gradient +translation_of: Web/SVG/Element/linearGradient +--- +
{{SVGRef}}
+ +

概要

+ +

linearGradient要素はグラフィック要素の塗りまたは線への線形グラデーションを定義します。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

例

+ +

» linearGradient.svg

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{ SVGAttr("gradientUnits") }}
    • +
  • {{ SVGAttr("gradientTransform") }}
    • +
  • {{ SVGAttr("x1") }}
    • +
  • {{ SVGAttr("y1") }}
    • +
  • {{ SVGAttr("x2") }}
    • +
  • {{ SVGAttr("y2") }}
    • +
  • {{ SVGAttr("spreadMethod") }}
    • +
  • {{ SVGAttr("xlink:href") }}
    • +
+ +

DOM インターフェース

+ +

この要素は SVGLinearGradientElement インターフェースを提供します。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}{{Spec2('SVG1.1')}}最初の定義
+ +

ブラウザー互換性

+ + + +

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

+ +

関連情報

+ +
    +
  • {{ SVGElement("radialGradient") }}
    • +
  • {{ SVGElement("stop") }}
    • +
diff --git a/files/ja/web/svg/element/mask/index.html b/files/ja/web/svg/element/mask/index.html new file mode 100644 index 0000000000..1bcca8da48 --- /dev/null +++ b/files/ja/web/svg/element/mask/index.html @@ -0,0 +1,112 @@ +--- +title: +slug: Web/SVG/Element/mask +tags: + - Element + - SVG + - SVG Container +translation_of: Web/SVG/Element/mask +--- +
{{SVGRef}}
+ +

The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the {{SVGAttr("mask")}} property.

+ +
+ + +
<svg viewBox="-10 -10 120 120">
+  <mask id="myMask">
+    <!-- Everything under a white pixel will be visible -->
+    <rect x="0" y="0" width="100" height="100" fill="white" />
+
+    <!-- Everything under a black pixel will be invisible -->
+    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
+  </mask>
+
+  <polygon points="-10,110 110,110 110,-10" fill="orange" />
+
+  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
+  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

属性

+ +
+
{{SVGAttr("height")}}
+
This attribute defines the height of the masking area.
+ Value type: <length> ; Default value: 120%; Animatable: yes
+
{{SVGAttr("maskContentUnits")}}
+
This attribute defines the coordinate system for the contents of the <mask>.
+ Value type: userSpaceOnUse|objectBoundingBox ; Default value: userSpaceOnUse; Animatable: yes
+
{{SVGAttr("maskUnits")}}
+
This attribute defines defines the coordinate system for attributes {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} and {{SVGAttr("height")}} on the <mask>.
+ Value type: userSpaceOnUse|objectBoundingBox ; Default value: objectBoundingBox; Animatable: yes
+
{{SVGAttr("x")}}
+
This attribute defines the x-axis coordinate of the top-left corner of the masking area.
+ Value type: <coordinate> ; Default value: -10%; Animatable: yes
+
{{SVGAttr("y")}}
+
This attribute defines the y-axis coordinate of the top-left corner of the masking area.
+ Value type: <coordinate> ; Default value: -10%; Animatable: yes
+
{{SVGAttr("width")}}
+
This attribute defines the width of the masking area.
+ Value type: <length> ; Default value: 120%; Animatable: yes
+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('CSS Masks', '#MaskElement', '<mask>')}}{{Spec2('CSS Masks')}} 
{{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}}{{Spec2('SVG1.1')}}初期定義
+ +

ブラウザの互換性

+ + + +

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

+ +

あわせて参照

+ +
    +
  • Other clipping and masking SVG elements: {{SVGElement("clipPath")}}
    • +
  • Clipping and masking CSS properties: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}}
    • +
diff --git a/files/ja/web/svg/element/metadata/index.html b/files/ja/web/svg/element/metadata/index.html new file mode 100644 index 0000000000..8925ae75ed --- /dev/null +++ b/files/ja/web/svg/element/metadata/index.html @@ -0,0 +1,64 @@ +--- +title: metadata +slug: Web/SVG/Element/metadata +tags: + - Element + - SVG + - SVG Descriptive +translation_of: Web/SVG/Element/metadata +--- +
{{SVGRef}}
+ +

メタデータはデータに関する構造化データです。SVGコンテンツに含まれているメタデータは、 metadata 要素で指定する必要があります。  metadata 要素の内容はRDF,FOAFなどの他のXML名前空間からの要素でなければなりません。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

例

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +

この要素には専用属性はありません。

+ +

DOM インターフェース

+ +

この要素は SVGMetadataElement インターフェースを提供します。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'struct.html#MetadataElement', '<metadata>')}}{{Spec2('SVG2')}}グローバルイベント属性を許可。
{{SpecName('SVG1.1', 'metadata.html#MetadataElement', '<metadata>')}}{{Spec2('SVG1.1')}}最初の定義
+ +

ブラウザ実装状況

+ + + +

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

diff --git a/files/ja/web/svg/element/mpath/index.html b/files/ja/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..00c5daa516 --- /dev/null +++ b/files/ja/web/svg/element/mpath/index.html @@ -0,0 +1,108 @@ +--- +title: +slug: Web/SVG/Element/mpath +tags: + - SVGアニメーション + - リファレンス + - 要素 +translation_of: Web/SVG/Element/mpath +--- +
{{SVGRef}}
+ +

概要

+ +

{{ SVGElement("animateMotion") }}要素のmpath サブ要素は、外部の {{ SVGElement("path") }}要素をモーションパスの定義として参照する機能を提供します。

+ +

利用可能な場所

+ +

{{svginfo}}

+ +

例

+ +
<svg width="100%" height="100%"  viewBox="0 0 500 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+  <rect x="1" y="1" width="498" height="298"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <!-- Draw the outline of the motion path in blue, along
+          with three small circles at the start, middle and end. -->
+  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+        fill="none" stroke="blue" stroke-width="7.06"  />
+  <circle cx="100" cy="250" r="17.64" fill="blue"  />
+  <circle cx="250" cy="100" r="17.64" fill="blue"  />
+  <circle cx="400" cy="250" r="17.64" fill="blue"  />
+
+  <!-- Here is a triangle which will be moved about the motion path.
+       It is defined with an upright orientation with the base of
+       the triangle centered horizontally just above the origin. -->
+  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+        fill="yellow" stroke="red" stroke-width="7.06"  >
+    <!-- Define the motion path animation -->
+    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+       <mpath xlink:href="#path1"/>
+    </animateMotion>
+  </path>
+</svg>
+
+ +

出力結果:

+ +

{{EmbedLiveSample("Example",250,165)}}

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{ SVGAttr("xlink:href") }}
    • +
+ +

DOM インターフェイス

+ +

この要素は SVGMPathElement インターフェイスを提供します。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("SVG Animations 2", "#MPathElement", "<mpath>")}}{{Spec2("SVG Animations 2")}}変更なし
{{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}}{{Spec2("SVG1.1")}}最初の定義
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ +
    +
  • {{ SVGElement("animateMotion") }}
    • +
diff --git a/files/ja/web/svg/element/path/index.html b/files/ja/web/svg/element/path/index.html new file mode 100644 index 0000000000..45b6aaf7f8 --- /dev/null +++ b/files/ja/web/svg/element/path/index.html @@ -0,0 +1,107 @@ +--- +title: +slug: Web/SVG/Element/path +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/path +--- +
{{SVGRef}}
+ +

<path> SVG要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/>
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

属性

+ +
+
{{SVGAttr("d")}}
+
この属性は図形のパスを定義します。
+ 値の型: <string> ; 初期値: ''; アニメーション可否: yes
+
{{SVGAttr("pathLength")}}
+
この属性は、ユーザ単位系でのパスの全長を指定することを可能にします。
+ 値の型: <number> ; 初期値: none; アニメーション可否: yes
+
+ +

グローバル属性

+ +
+
コア属性
+
特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
条件処理属性
+
特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
イベント属性
+
グローバルイベント属性, グラフィカルイベント属性
+
プレゼンテーション属性
+
特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA属性
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

利用ノート

+ +

{{svginfo}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("SVG Paths", "#PathElement", "<path>")}}{{Spec2("SVG Paths")}}
{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}{{Spec2("SVG1.1")}}最初の定義
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/svg/element/pattern/index.html b/files/ja/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..adf33d7f5e --- /dev/null +++ b/files/ja/web/svg/element/pattern/index.html @@ -0,0 +1,120 @@ +--- +title: +slug: Web/SVG/Element/pattern +translation_of: Web/SVG/Element/pattern +--- +
{{SVGRef}}
+ +

<pattern>要素は同じ図形をx軸y軸方向にタイルを敷き詰めるように繰り返し描画させます．

+ +

<pattern>は他のgraphics elementsの{{SVGAttr("fill")}}または{{SVGAttr("stroke")}}属性として参照されることが可能です．

+ +
+ + +
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
+      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
+    </pattern>
+  </defs>
+
+  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
+  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
+</svg>
+ +

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

+
+ +

属性

+ +
+
{{SVGAttr("height")}}
+
This attribute determines the height of the pattern tile.
+ Value type: <length>|<percentage>; Default value: 0; Animatable: yes
+
{{SVGAttr("href")}}
+
This attribute reference a template pattern that provides default values for the <pattern> attributes.
+ Value type: <URL>; Default value: none; Animatable: yes
+
{{SVGAttr("patternContentUnits")}}
+
This attribute defines the coordinate system for the contents of the {{ SVGElement("pattern") }}.
+ Value type: userSpaceOnUse|objectBoundingBox; Default value: userSpaceOnUse; Animatable: yes +

Note: This attribute has no effect if a viewBox attribute is specified on the <pattern> element.

+
+
{{SVGAttr("patternTransform")}}
+
This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.
+ Value type: <transform-list>; Default value: none; Animatable: yes
+
{{SVGAttr("patternUnits")}}
+
This attribute defines the coordinate system for attributes x, y, width and height.
+ Value type: userSpaceOnUse|objectBoundingBox; Default value: objectBoundingBox; Animatable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
+ Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
+
{{SVGAttr("viewBox")}}
+
This attribute defines the bound of the SVG viewport for the pattern fragment.
+ Value type: <list-of-numbers> ; Default value: none; Animatable: yes
+
{{SVGAttr("width")}}
+
This attribute determines the width of the pattern tile.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("x")}}
+
This attribute determines the x coordinate shift of the pattern tile.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
This attribute reference a template pattern that provides default values for the <pattern> attributes.
+ Value type: <URL>; Default value: none; Animatable: yes +

Note: For browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used.

+
+
{{SVGAttr("y")}}
+
This attribute determines the y coordinate shift of the pattern tile.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +

グローバル属性

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink Attributes
+
Most notably: {{SVGAttr("xlink:title")}}
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/ja/web/svg/element/polygon/index.html b/files/ja/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..524d9c87fb --- /dev/null +++ b/files/ja/web/svg/element/polygon/index.html @@ -0,0 +1,88 @@ +--- +title: polygon +slug: Web/SVG/Element/polygon +translation_of: Web/SVG/Element/polygon +--- +
{{SVGRef}}
+ +

<polygon>要素は、直線のセグメントのつながりで構成された閉じた図形を定義します。最後の点は最初の点と結ばれます。開いた図形については{{SVGElement("polyline")}}要素をご覧ください。

+ +

使える場所

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{SVGAttr("points")}}
    • +
+ +

DOMインターフェイス

+ +

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

+ +

例

+ +

SVG

+ +
<svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg">
+
+  <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
+</svg>
+ +

結果

+ +

{{EmbedLiveSample("Example", 120, 120)}}
+» polygon.svg

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG2')}}変更なし
{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG1.1')}}初期定義
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ +
    +
  • {{SVGElement("polyline")}}
    • +
diff --git a/files/ja/web/svg/element/polyline/index.html b/files/ja/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..e093dce2fd --- /dev/null +++ b/files/ja/web/svg/element/polyline/index.html @@ -0,0 +1,85 @@ +--- +title: polyline +slug: Web/SVG/Element/polyline +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/polyline +--- +
{{SVGRef}}
+ +

概要

+ +

polyline要素はSVGの基本図形であり、いくつかの座標で繋がった一連の直線を生成します。一般的にpolyline要素は開いた図形を生成する際に使用します。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

例

+ +

» polyline.svg

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{ SVGAttr("points") }}
    • +
+ +

DOM インターフェイス

+ +

この要素は SVGPolylineElement インターフェイスを提供します。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}}{{Spec2('SVG1.1')}}最初の定義
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ +
    +
  • {{ SVGElement("line") }}
    • +
  • {{ SVGElement("polygon") }}
    • +
diff --git a/files/ja/web/svg/element/radialgradient/index.html b/files/ja/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..b617afb4fb --- /dev/null +++ b/files/ja/web/svg/element/radialgradient/index.html @@ -0,0 +1,107 @@ +--- +title: radialGradient +slug: Web/SVG/Element/radialGradient +tags: + - Element + - SVG + - SVG Gradient +translation_of: Web/SVG/Element/radialGradient +--- +
{{SVGRef}}
+ +

radialGradient要素はグラフィックス要素の塗りまたは線への放射状グラデーションを定義します。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{ SVGAttr("gradientUnits") }}
    • +
  • {{ SVGAttr("gradientTransform") }}
    • +
  • {{ SVGAttr("cx") }}
    • +
  • {{ SVGAttr("cy") }}
    • +
  • {{ SVGAttr("r") }}
    • +
  • {{ SVGAttr("fx") }}
    • +
  • {{ SVGAttr("fy") }}
    • +
  • {{ SVGAttr("fr") }}
    • +
  • {{ SVGAttr("spreadMethod") }}
    • +
  • {{ SVGAttr("xlink:href") }}
    • +
+ +

DOM インターフェース

+ +

この要素は SVGRadialGradientElement インターフェースを提供します。

+ +

例

+ +

SVG

+ +
+
<svg width="120" height="120" viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="exampleGradient">
+      <stop offset="10%" stop-color="gold"/>
+      <stop offset="95%" stop-color="green"/>
+    </radialGradient>
+  </defs>
+
+  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
+</svg>
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 120, 120)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG2')}}fr 属性の追加
{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG1.1')}}初期定義
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ +
    +
  • {{ SVGElement("linearGradient") }}
    • +
diff --git a/files/ja/web/svg/element/rect/index.html b/files/ja/web/svg/element/rect/index.html new file mode 100644 index 0000000000..2a6e95ee9e --- /dev/null +++ b/files/ja/web/svg/element/rect/index.html @@ -0,0 +1,95 @@ +--- +title: rect +slug: Web/SVG/Element/rect +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

概要

+ +

rect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。

+ +

例

+ +

シンプルな rect 要素の使い方

+ +

» rect-1.svg

+ +

角の丸い rect 要素

+ +

» rect-2.svg

+ +

属性

+ +

グローバル属性

+ + + +

専用属性

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("rx") }}
    • +
  • {{ SVGAttr("ry") }}
    • +
+ +

DOM インターフェイス

+ +

この要素は SVGRectElement インターフェイスを提供します。

+ +

使用可能な場所

+ +

{{svginfo}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('SVG2', 'shapes.html#RectElement', '<rect>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#RectElement', '<rect>')}}{{Spec2('SVG1.1')}}最初の定義
+ +

ブラウザー互換性

+ + + +

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

+ +

関連情報

+ +
    +
  • {{ SVGElement("path") }}
    • +
diff --git a/files/ja/web/svg/element/script/index.html b/files/ja/web/svg/element/script/index.html new file mode 100644 index 0000000000..88138ee018 --- /dev/null +++ b/files/ja/web/svg/element/script/index.html @@ -0,0 +1,107 @@ +--- +title: