From e8f54a0392826cf487608997a76e81986fe67b84 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 4 Aug 2024 13:17:08 +0900 Subject: [PATCH 1/4] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../svg/attribute/stroke-linejoin/index.md | 385 ++++++++++++++++-- 1 file changed, 342 insertions(+), 43 deletions(-) diff --git a/files/ja/web/svg/attribute/stroke-linejoin/index.md b/files/ja/web/svg/attribute/stroke-linejoin/index.md index 6bf1a4c9426304..9ab4976c3bbcb9 100644 --- a/files/ja/web/svg/attribute/stroke-linejoin/index.md +++ b/files/ja/web/svg/attribute/stroke-linejoin/index.md @@ -1,73 +1,372 @@ --- title: stroke-linejoin slug: Web/SVG/Attribute/stroke-linejoin +l10n: + sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5 --- {{SVGRef}} -« [SVG 属性リファレンスホーム](/ja/docs/Web/SVG/Attribute) +**`stroke-linejoin`** 属性は、ストローク（線）が描かれたときにパスの角に使用する形状を定義する表示属性です。 -`stroke-linejoin` 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。 +> [!NOTE] +> プレゼンテーション属性であるため、`stroke-linejoin` は CSS プロパティとして使用できます。 -プレゼンテーション属性のため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。 +この属性は次の SVG 要素で使用できます。 -**注意:** `miter` オプションの最終的な見た目は [`stroke-miterlimit`](/ja/docs/Web/SVG/Attribute/stroke-miterlimit) 属性の値の影響を受けます。 +- {{SVGElement('path')}} +- {{SVGElement('polygon')}} +- {{SVGElement('polyline')}} +- {{SVGElement('rect')}} +- {{SVGElement('text')}} +- {{SVGElement('textPath')}} +- {{SVGElement('tref')}} +- {{SVGElement('tspan')}} -## 使用可能な場所 +## 例 -| カテゴリ | プレゼンテーション属性 | -| -------------- | -------------------------------------------------------------------------------------- | -| 値 | **miter** \| round \| bevel \| inherit | -| アニメーション | Yes | -| 標準文書 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty) | +```css hidden +html, +body, +svg { + height: 100%; +} +``` -## 例 +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +{{EmbedLiveSample("Example", '100%', 400)}} + +## 使用場面 + + + + + + + + + + + + + + + + +
値 + arcs | bevel |miter | + miter-clip | round +
既定値miter
アニメーション離散的
+ +### arcs + +> [!NOTE] +> `arcs` は SVG2 で導入されたものであり、まだ広く対応されていません。詳しくは下記の[ブラウザーの互換性](#ブラウザーの互換性)を参照してください。 + +`arcs` 値は、パスの区間同士を結合するために円弧のコーナーを使用することを示します。円弧の形状は、結合点のストロークの外側の辺を、結合点の外側の辺と同じ曲率の円弧で拡張することによって形成されます。 + +```css hidden +html, +body, +svg { + height: 100%; +} +``` ```html - - - + + + fill="none" + stroke-linejoin="arcs" /> + + + + + + + + + +``` -