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/css/paint-order/index.html | 107 ++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 files/ja/web/css/paint-order/index.html (limited to 'files/ja/web/css/paint-order/index.html') diff --git a/files/ja/web/css/paint-order/index.html b/files/ja/web/css/paint-order/index.html new file mode 100644 index 0000000000..6ec0316ebf --- /dev/null +++ b/files/ja/web/css/paint-order/index.html @@ -0,0 +1,107 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +tags: + - CSS + - Experimental + - Reference + - SVG + - ウェブ + - 描画順序 +translation_of: Web/CSS/paint-order +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

paint-order は CSS のプロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。

+ +

構文

+ +
/* 通常 */
+paint-order: normal;
+
+/* 単一の値 */
+paint-order: stroke; /* 最初に輪郭、それから塗りつぶしとマーカーを描画 */
+paint-order: markers; /* 最初にマーカー、それから塗りつぶしと輪郭 */
+
+/* 複数の値 */
+paint-order: stroke fill; /* 最初に輪郭を、それから塗りつぶしを、そしてマーカーを描く */
+paint-order: markers stroke fill; /* マーカー、輪郭、塗りつぶしの順に描く */
+
+ +

値が指定されない場合、既定の描画順序は fill, stroke, markers です。

+ +

一つの値で指定されると、それが最初に描画され、続いて他の二つが互いの既定の順序で描画されます。二つの値が指定されると、指定された順序で描画を行い、続いて指定されなかった一つが描画されます。

+ +
+

メモ: このプロパティの場合、マーカーは marker-* プロパティ (例えば marker-start) および <marker> 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は stroke および fill の順序のみが指定できます。

+
+ +

値

+ +
+
normal
+
様々なアイテムを通常の描画順で描画します。
+
stroke (輪郭),
+ fill (塗りつぶし),
+ markers (マーカー)
+
これらの一部またはすべての値を用いて、描画したい順序を指定します。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>
+ +

CSS

+ +
text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%", 165)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG2", "painting.html#PaintOrder", "paint-order")}}{{Spec2("SVG2")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.paint-order")}}

-- cgit v1.2.3-54-g00ecf