From 66dd961c765e2843fdc3ed463baa19873924c0a3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Aug 2021 14:33:08 +0900 Subject: 意味のない title 属性を削除 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix #1877 --- files/ja/web/svg/tutorial/basic_shapes/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'files/ja/web/svg/tutorial/basic_shapes/index.html') diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.html b/files/ja/web/svg/tutorial/basic_shapes/index.html index 2b87124f8a..9ad6201924 100644 --- a/files/ja/web/svg/tutorial/basic_shapes/index.html +++ b/files/ja/web/svg/tutorial/basic_shapes/index.html @@ -29,47 +29,47 @@ translation_of: Web/SVG/Tutorial/Basic_Shapes
注意: stroke、stroke-width および fill の各属性は後のチュートリアルで説明します。

長方形

-

rect 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。

+

rect 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。

 <rect x="10" y="10" width="30" height="30"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
x
長方形の左上の角の位置を示す、X 座標です。
y
長方形の左上の角の位置を示す、Y 座標です。
width
長方形の幅です。
height
長方形の高さです。
rx
長方形の角の、X 軸方向の半径です。
ry
長方形の角の、Y 軸方向の半径です。

円

-

おそらくあなたの推測どおりで、circle 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。

+

おそらくあなたの推測どおりで、circle 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。

 <circle cx="25" cy="75" r="20"/>
r
円の半径です。
cx
円の中心の位置を示す、X 座標です。
cy
円の中心の位置を示す、Y 座標です。

楕円

-

ellipse は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。

+

ellipse は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。

 <ellipse cx="75" cy="75" rx="20" ry="5"/>
rx
楕円の X 軸方向の半径です。
ry
楕円の Y 軸方向の半径です。
cx
楕円の中心の位置を示す、X 座標です。
cy
楕円の中心の座標を示す、Y 座標です。

直線

-

line は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。

+

line は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。

 <line x1="10" x2="50" y1="110" y2="150"/>
x1
点 1 の X 座標です。
y1
点 1 の Y 座標です。
x2
点 2 の X 座標です。
y2
点 2 の Y 座標です。

ポリライン

-

polyline は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:

+

polyline は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:

 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
points
点のリストで、各々の数値は空白、カンマ、EOL、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。

多角形

-

polygon は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <rect/> 要素を作成するために polygon を用いることができることに留意してください。

+

polygon は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <rect/> 要素を作成するために polygon を用いることができることに留意してください。

 <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
points
点のリストで、各々の数値は空白、カンマ、EOL、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。パスを閉じるように描画するため、最後の直線は (2,2) から (0,0) に描画されます。

パス

-

path は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの次のセクションに独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。

+

path は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの次のセクションに独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。

 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
-
d
点のリストと、パスの描画方法に関する情報です。詳しくは Paths をご覧ください。
+
d
点のリストと、パスの描画方法に関する情報です。詳しくは Paths をご覧ください。

{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}

Interwiki Languages Links

-- cgit v1.2.3-54-g00ecf