From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/svg/attribute/stroke-dashoffset/index.html | 114 +++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 files/ja/web/svg/attribute/stroke-dashoffset/index.html (limited to 'files/ja/web/svg/attribute/stroke-dashoffset/index.html') diff --git a/files/ja/web/svg/attribute/stroke-dashoffset/index.html b/files/ja/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..a988f3813d --- /dev/null +++ b/files/ja/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,114 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +
{{SVGRef}}
+ +

stroke-dashoffset属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。

+ +

Note: プレゼンテーション属性として、stroke-dashoffsetはCSSプロパティとして使用することができます。

+ +

プレゼンテーション属性として、それは、いくつかの要素に適用させることができますが、次の12個の要素にのみ効果があります。

+ +

 {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('line')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- No dash array -->
+  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+
+  <!-- No dash offset -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" />
+
+  <!--
+  The start of the dash array computation
+  is pulled by 3 user units
+  -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="3" />
+
+  <!--
+  The start of the dash array computation
+  is pushed by 3 user units
+  -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="-3" />
+
+  <!--
+  The start of the dash array computation
+  is pulled by 1 user units which ends up
+  in the same rendering as the previous example
+  -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="1" />
+
+  <!--
+  the following red lines highlight the
+  offset of the dash array for each line
+  -->
+  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Usage notes

+ + + + + + + + + + + + + + + + +
Value<percentage> | <length>
Default value0
AnimatableYes
+ +

The offset is usually expressed in user units resolved against the {{SVGAttr('pathLength')}} but if a <percentage> is used, the value is resolved as a percentage of the current viewport.

+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.presentation.stroke-dashoffset")}}

+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}{{Spec2("SVG2")}}Definition for shapes and texts
{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}{{Spec2("SVG1.1")}}Initial definition for shapes and texts
-- cgit v1.2.3-54-g00ecf