additions and standardizations for polygon() and path() (mdn#30545)

* standardization of polygon() and path() * touchup to polygon() * more detail for polygon * touch-up for polygon() * with -> by * Update files/en-us/web/css/path/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/basic-shape/polygon/index.md Co-authored-by: Estelle Weyl <[email protected]> --------- Co-authored-by: Sideways S <[email protected]> Co-authored-by: Estelle Weyl <[email protected]>
OnkarRuikar · Nov 28, 2023 · 95000d4 · 95000d4
1 parent 4700d96
commit 95000d4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/files/en-us/web/css/basic-shape/polygon/index.md b/files/en-us/web/css/basic-shape/polygon/index.md
@@ -28,12 +28,16 @@ polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
 polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)
 ```
 
+The `polygon()` parameters are separated by a comma and optional whitespace. The first parameter is an optional [`<fill-rule>`](/en-US/docs/Web/SVG/Attribute/fill-rule) value. Additional parameters are points that define the polygon. Each point is a pair of x/y coordinate {{cssxref("length-percentage")}} values separated by a space, e.g. "0 0" and "100% 100%" for the left/top and bottom right corners, respectively.
+
+Note: The SVG [`<polygon>`](/en-US/docs/Web/SVG/Element/polygon) element has separate attributes for [`fill-rule`](/en-US/docs/Web/SVG/Attribute/fill-rule) and [`points`](/en-US/docs/Web/SVG/Attribute/points), and `points` is flexible about the use of space and comma separators. CSS `polygon()` rules for separators are strictly enforced.
+
 ### Parameters
 
 - [`<fill-rule>`](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}}
   - : An optional value of `nonzero` (the default when omitted) or `evenodd`, which specifies the filling rule.
 - {{cssxref("length-percentage")}}
-  - : Each vertex of the polygon is represented with a pair of `<length-percentage>` values, which give the coordinates of the vertex relative to the shape's [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box).
+  - : Each vertex of the polygon is represented by a pair of `<length-percentage>` values, which give the x/y coordinates of the vertex relative to the shape's [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box).
 
 ### Return value
 

diff --git a/files/en-us/web/css/path/index.md b/files/en-us/web/css/path/index.md
@@ -27,13 +27,18 @@ path([<'fill-rule'>,]?<string>)
 
 ### Parameters
 
-- `<'fill-rule'>`
-  - : The filling rule for the interior of the path.
-    Possible values are `nonzero` or `evenodd`.
-    The default value is `nonzero`.
-    See [fill-rule](/en-US/docs/Web/SVG/Attribute/fill-rule) for more details.
-- `<string>`
-  - : The string is a [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path).
+- [`<fill-rule>`](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}}
+  - : An optional value of [`nonzero`](/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero) (the default when omitted) or [`evenodd`](/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd), which specifies the filling rule.
+- {{cssxref("string")}}
+  - : A [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path). The syntax for the contents of this `<string>` is identical to SVG.
+
+### Return value
+
+Returns a {{cssxref("basic-shape")}} value.
+
+## Formal syntax
+
+{{csssyntax}}
 
 ## Examples