feat: Add stroke CSS SVG properties

mdn · Aug 16, 2024 · e88bd18 · e88bd18
1 parent 565162b
commit e88bd18
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 15 deletions.
diff --git a/css/properties.json b/css/properties.json
@@ -9289,37 +9289,117 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke"
   },
-  "stroke-color": {
-    "syntax": "<color>#",
+  "stroke-dasharray": {
+    "syntax": "none | <dasharray>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "",
+    "percentages": "referToSVGViewportDiagonal",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "none",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "listEachItemConsistingOfAbsoluteLengthPercentageOrKeyword",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-dasharray"
+  },
+  "stroke-dashoffset": {
+    "syntax": "<length-percentage> | <number>",
     "media": "visual",
     "inherited": true,
     "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportDiagonal",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "absoluteLengthOrPercentageNumbersConverted",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-dashoffset"
+  },
+  "stroke-linecap": {
+    "syntax": "butt | round | square",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
     "percentages": "no",
     "groups": [
       "Scalable Vector Graphics"
     ],
-    "initial": "transparent",
-    "appliesto": "blockContainers",
-    "computed": "computedColor",
-    "order": "perGrammar",
+    "initial": "butt",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
     "status": "standard",
-    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-color"
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-linecap"
   },
-  "stroke-image": {
-    "syntax": "<paint>#",
+  "stroke-linejoin": {
+    "syntax": "miter | miter-clip | round | bevel | arcs",
     "media": "visual",
     "inherited": true,
-    "animationType": "",
+    "animationType": "discrete",
     "percentages": "no",
     "groups": [
       "Scalable Vector Graphics"
     ],
-    "initial": "none",
-    "appliesto": "blockContainers",
-    "computed": "computedColor",
-    "order": "perGrammar",
+    "initial": "miter",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-linejoin"
+  },
+  "stroke-miterlimit": {
+    "syntax": "<number>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "4",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-miterlimit"
+  },
+  "stroke-opacity": {
+    "syntax": "<opacity>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "1",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "specifiedValueClipped0To1",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-opacity"
+  },
+  "stroke-width": {
+    "syntax": "<length-percentage> | <number>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportDiagonal",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "1px",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "absoluteLengthOrPercentageNumbersConverted",
+    "order": "uniqueOrder",
     "status": "standard",
-    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-color"
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-width"
   },
   "tab-size": {
     "syntax": "<integer> | <length>",

diff --git a/css/properties.schema.json b/css/properties.schema.json
@@ -77,6 +77,7 @@
         "referToSVGViewportHeight",
         "referToSVGViewportSize",
         "referToSVGViewportWidth",
+        "referToSVGViewportDiagonal",
         "referToTotalPathLength",
         "referToWidthAndHeightOfElement",
         "referToWidthOfAffectedGlyph",
@@ -110,6 +111,7 @@
         "absoluteLengthOrNone",
         "absoluteLengthOrNormal",
         "absoluteLengthOrPercentage",
+        "absoluteLengthOrPercentageNumbersConverted",
         "absoluteLengthsSpecifiedColorAsSpecified",
         "absoluteLengthZeroIfBorderStyleNoneOrHidden",
         "absoluteLengthZeroOrLarger",
@@ -243,6 +245,9 @@
         "limitedSVGElementsEllipse",
         "limitedSVGElementsEllipseRect",
         "limitedSVGElementsGeometry",
+        "limitedSVGElementsShapes",
+        "limitedSVGElementsShapesAndTextContent",
+        "limitedSVGElementsTextContent",
         "listItems",
         "maskElements",
         "multicolElements",

diff --git a/l10n/css.json b/l10n/css.json
@@ -91,6 +91,9 @@
     "ja": "{{cssxref(\"length\")}} の場合は絶対的な値、それ以外はパーセント値",
     "ru": "для {{cssxref(\"length\")}} абсолютного значения, иначе процент"
   },
+  "absoluteLengthOrPercentageNumbersConverted": {
+    "en-US": "an absolute {{cssxref(\"length\")}} or {{cssxref(\"percentage\")}}, numbers converted to absolute lengths first",
+  },
   "absoluteLengthsSpecifiedColorAsSpecified": {
     "de": "Längen absolut gemacht; angegebene Farben berechnet; ansonsten wie angegeben",
     "en-US": "any length made absolute; any specified color computed; otherwise as specified",
@@ -971,13 +974,25 @@
   "limitedSVGElementsEllipseRect": {
     "en-US": "{{SVGElement(\"ellipse\")}} and {{SVGElement(\"rect\")}} elements in {{SVGElement(\"svg\")}}"
   },
+  "limitedSVGElementsShapes": {
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, and {{SVGElement(\"rect\")}} elements in an <code>svg</code>"
+  },
+  "limitedSVGElementsShapesAndTextContent": {
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, {{SVGElement(\"rect\")}}, {{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}}, and {{SVGElement(\"tspan\")}} elements in an <code>svg</code>"
+  },
+  "limitedSVGElementsTextContent": {
+    "en-US": "{{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}}, and {{SVGElement(\"tspan\")}} elements in an <code>svg</code>"
+  },
   "listEachItemConsistingOfAbsoluteLengthPercentageAndOrigin": {
     "de": "Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird",
     "en-US": "A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword",
     "fr": "Une liste dont chaque élément se compose d'un décalage (exprimé comme la combinaison d'une longueur absolue et d'un pourcentage) et d'un mot-clé pour l'origine",
     "ja": "絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。",
     "ru": "Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово"
   },
+  "listEachItemConsistingOfAbsoluteLengthPercentageOrKeyword": {
+    "en-US": "A comma separated list of absolute lengths or percentages, numbers converted to absolute lengths first, or keyword specified"
+  },
   "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage": {
     "en-US": "A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage",
     "ja": "リストで、それぞれの項目は 'normal'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。"
@@ -1430,6 +1445,9 @@
   "referToSVGViewportWidth": {
     "en-US": "refer to the width of the current SVG viewport"
   },
+  "referToSVGViewportDiagonal": {
+    "en-US": "refer to the normalized diagonal measure of the current SVG viewport’s applied {{SVGAttr(\"viewBox\")}}, or of the viewport itself if no `viewBox` is specified"
+  },
   "referToTotalPathLength": {
     "de": "beziehen sich auf die Gesamtlänge des Pfads",
     "en-US": "refer to the total path length",