Default ms-class for SVG element

Question

I use this code to create a hexagonal shape in JSON for a SharePoint list.

{
            "elmType": "svg",
            "style": {
              "fill": "currentColor",
              "cursor": "pointer"
            },
            "attributes": {
              "viewBox": "-150 -150 300 300",
              "class": "ms-fontColor-themeLight ms-bgColor-themeTertiary--hover"
            },
            "children": [
              {
                "elmType": "path",
                "attributes": {
                  "d": "M130,60.561C130,69.495 125.232,77.751 117.493,82.216C92.646,96.55 37.328,128.464 12.493,142.792C4.762,147.253 -4.762,147.253 -12.493,142.792C-37.328,128.464 -92.646,96.55 -117.493,82.216C-125.232,77.751 -130,69.495 -130,60.561L-130,-60.561C-130,-69.495 -125.232,-77.751 -117.493,-82.216C-92.646,-96.55 -37.328,-128.464 -12.493,-142.792C-4.762,-147.253 4.762,-147.253 12.493,-142.792C37.328,-128.464 92.646,-96.55 117.493,-82.216C125.232,-77.751 130,-69.495 130,-60.561L130,60.561Z"
                }
              }
            ]
          }

The tag "fill" applies a standard-color to the shape. Can I use the class-definition inside the elmType-attributes to assign a different color (e.g. ms-bgColor-themeSecondary) instead of using hex-color-codes?

Answer 1

Yes, the use of "fill": "currentColor" will mean that the fill value will be inherited from the text color (color) and you could set that value using a class. If you want the color to be themeTertiary then use the class ms-fontColor-themeTertiary. You can also set the fill for individual paths using the same technique.

There are several samples using this technique in the List Formatting Sample repo. Here's an example from the relevant portion of the Horse Crest sample:

{
  "elmType": "svg",
  "style": {
    "position": "absolute",
    "width": "88px",
    "height": "100px",
    "top": "40px",
    "left": "60px",
    "fill": "currentColor"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary"
  },
  "children": [
    {
      "elmType": "path",
      "attributes": {
        "d": "M 13.293424,79.005018 C -0.23486286,59.040168 9.3124783,43.447536 9.3124783,43.447536 7.0942758,42.790838 0,47.4402 0,47.4402 3.9901158,32.817586 25.936774,20.394322 25.936774,20.394322 23.500522,19.502762 16.627352,21.273658 16.627352,21.273658 34.582366,3.9931728 56.531572,10.419033 56.531572,10.419033 57.193873,6.6474772 68.061743,0 68.061743,0 66.950094,1.10095 66.501767,7.0947858 66.501767,7.0947858 67.610358,5.09667 71.163356,3.1021214 71.163356,3.1021214 c -1.99353,4.6493614 0,14.6231246 0,14.6231246 5.763048,5.768142 12.189927,25.7228 12.189927,25.7228 l 2.445425,3.545864 c 3.104667,4.439972 1.963467,11.420638 -1.11165,13.076392 -11.52406,6.22157 -12.638765,-5.09514 -12.638765,-5.09514 C 62.514708,53.866568 55.419922,43.221844 55.419922,43.221844 42.566164,49.870848 49.725142,68.628272 55.275234,75.831063 62.406192,85.064067 57.184703,100 57.184703,100 c 0,0 -30.533151,-1.264483 -43.891279,-20.994982 z"
      }
    }
  ]
}

The above use of class on the svg element with a fill of currentColor has the effect of setting the fill of the path element to the primary theme color for the site.