From da4393ab2078b974f6e54ab12105640326d3eef2 Mon Sep 17 00:00:00 2001 From: potappo Date: Mon, 29 Mar 2021 23:44:32 +0900 Subject: Web/SVG/Element/use を修正 (#240) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ・英語版2021/2/20 最新版の更新を反映 ・誤字の修正 (mozilla-japan/translation/issues/537) * レビュー指摘を反映 - 文字化けを修正 - リンクを修正 --- files/ja/web/svg/element/use/index.html | 54 ++++++++++++++++----------------- 1 file changed, 26 insertions(+), 28 deletions(-) (limited to 'files/ja/web/svg/element/use/index.html') diff --git a/files/ja/web/svg/element/use/index.html b/files/ja/web/svg/element/use/index.html index 3507e70c92..d1af140087 100644 --- a/files/ja/web/svg/element/use/index.html +++ b/files/ja/web/svg/element/use/index.html @@ -14,14 +14,14 @@ translation_of: Web/SVG/Element/use
-
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
-  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
-  <use href="#myCircle" x="10" fill="blue"/>
-  <use href="#myCircle" x="20" fill="white" stroke="red"/>
-  <!--
+
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
+  <use href="#myCircle" x="10" fill="blue"/>
+  <use href="#myCircle" x="20" fill="white" stroke="red"/>
+  <!--
 stroke="red" will be ignored here, as stroke was already set on myCircle.
 Most attributes (except for x, y, width, height and (xlink:)href)
 do not override those set in the ancestor.
@@ -34,37 +34,37 @@ That's why the circles have different x positions, but the same stroke value.
 
 
効果は、あたかもそのノードが非公開の DOM に配下を含めて複製され、 HTML5 の template 要素のように、 use 要素がある場所に貼り付けられたかのように同じになります。

 
-
use のほとんどの属性は、 use から参照される要素に既にある属性を上書きしません。 (これは CSS のスタイル属性がカスケードで「以前」に設定されたものを上書きする方法とは異なります)。 use 要素にある{{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}}, {{SVGAttr("href")}} の各属性のみが参照される要素に設定されているものを上書きします。ただし、参照される要素に設定されていない他のすべての属性は、 use 要素に適用されます。

+
use のほとんどの属性は、 use から参照される要素に既にある属性を上書きしません。 (これは CSS のスタイル属性がカスケードで「以前」に設定されたものを上書きする方法とは異なります)。 use 要素にある{{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}}, {{SVGAttr("href")}} の各属性のみが参照される要素に設定されているものを上書きします。ただし、参照される要素に設定されていない他のすべての属性は、 use 要素に適用され得ます。

 
 
クローンされたノードは公開されないので、 CSS を使って use 要素とその隠れた子孫要素にスタイル付けをする場合は注意が必要です。CSS の継承を使用して明示的に要求しない限り、CSS 属性は隠された複製の DOM によって継承されることが保証されません。

 
-
セキュリティ上の理由で、ブラウザーは同一オリジンポリシーを use 要素に適用して、 {{SVGAttr("href")}} 属性にあるオリジンをまたがる URL を読み込むことを拒否することがあります。現在のところ、 use 要素のふぉういつオリジンポリシーを設定する方法は定義されていません。

+
セキュリティ上の理由で、ブラウザーは同一オリジンポリシーを use 要素に適用して、 {{SVGAttr("href")}} 属性にあるオリジンをまたがる URL を読み込むことを拒否することがあります。現在のところ、 use 要素の同一オリジンポリシーを設定する方法は定義されていません。

 
 

-
SVG 2 で {{SVGAttr("xlink:href")}} 属性が非推奨になり、 {{SVGAttr("href")}} に置き換えられました。詳しくは {{SVGAttr("xlink:href")}} のページを参照してください。ただし、 {{SVGAttr("xlink:href")}} はブラウザー間の互換性のために今でも実装する必要があります (下記の互換性一覧表を参照)。

+
SVG 2 で {{SVGAttr("xlink:href")}} 属性が非推奨になり、 {{SVGAttr("href")}} に置き換えられました。詳しくは {{SVGAttr("xlink:href")}} のページを参照してください。ただし、 {{SVGAttr("xlink:href")}} はブラウザー間の互換性のために今でも実装する必要があります (下記の互換性一覧表を参照)。

 

 
-
属性

+
属性

 
 

  
{{SVGAttr("href")}}

  
複製する必要がある要素やフラグメントへの URL です。

- 値の型: <URL> ; 既定値: none; Animatable: yes

+ 値の型: <URL> ; 既定値: none; Animatable: yes
  
{{SVGAttr("xlink:href")}}

- 
{{Deprecated_Header("SVG2")}}複製する必要がある要素やフラグメントの <IRI> 参照です。

- 値の型: <IRI> ; 既定値: none; Animatable: yes

+ 
{{Deprecated_Header("SVG2")}}複製する必要がある要素やフラグメントの <IRI> 参照です。

+ 値の型: <IRI> ; 既定値: none; Animatable: yes

  
{{SVGAttr("x")}}

  
この use 要素の X 座標です。

- 値の型: <coordinate> ; 既定値: 0; Animatable: yes

+ 値の型: <coordinate> ; 既定値: 0; Animatable: yes
  
{{SVGAttr("y")}}

  
この use 要素の Y 座標です。

- 値の型: <coordinate> ; 既定値: 0; Animatable: yes

+ 値の型: <coordinate> ; 既定値: 0; Animatable: yes
  
{{SVGAttr("width")}}

  
The width of the use element.

- 値の型: <length> ; 既定値: 0; Animatable: yes

+ 値の型: <length> ; 既定値: 0; Animatable: yes
  
{{SVGAttr("height")}}

  
The height of the use element.

- 値の型: <length> ; 既定値: 0; Animatable: yes

+ 値の型: <length> ; 既定値: 0; Animatable: yes
 

 
 

@@ -75,18 +75,18 @@ That's why the circles have different x positions, but the same stroke value.
 
注: SVG2 から、 x, y, width, height は位置プロパティとなり、すなわちこれらの属性がその要素への CSS プロパティとしても使用することができるようになりました。

 

 
-
グローバル属性

+
グローバル属性

 
 

- 
コア属性

+ 
コア属性

  
特に: {{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

@@ -94,11 +94,11 @@ That's why the circles have different x positions, but the same stroke value.
  
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}

 

 
-
使用上の注意

+
使用上の注意

 
 
{{svginfo}}

 
-
仕様書

+
仕様書

 
 
@@ -122,8 +122,6 @@ That's why the circles have different x positions, but the same stroke value.
  

  
 

 
-
ブラウザーの互換性

-
-
+
ブラウザーの互換性

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

-- 
cgit v1.2.3-54-g00ecf