Node-RedでSVGを描画する その７：CSSを反映する

実際のところ

<svg x="0" y="0" height="300" viewBox="0 0 100 100" width="300" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0"  width="100" height="100" href="data:image/png;base64,iVBORw0KGgoAAA..." />
  <rect x="0"  y="0"  width="50"  height="50" class="rect rectBlue" />
  <rect x="50" y="0"  width="50"  height="50" class="rect rectPink" />
  <rect x="0"  y="50" width="50"  height="50" class="rect rectGreen" />
  <rect x="50" y="50" width="50"  height="50" class="rect rectYellow" />
</svg>

この状態でCSSタブ

div.ui-svg svg{
    color: var(--nr-dashboard-widgetColor);
    fill: currentColor !important;
}
div.ui-svg path {
    fill: inherit;
}

.rect {
    stroke:black;
    stroke-width:1;
}

.rectBlue {
    fill:blue;
    fill-opacity:0.2;
}

.rectPink {
    fill:pink;
    fill-opacity:0.2;
}

.rectGreen {
    fill:green;
    fill-opacity:0.2;
}

.rectYellow {
    fill:yellow;
    fill-opacity:0.2;
}

参考もと

Apply internal CSS styles · bartbutenaers/node-red-contrib-ui-svg Wiki · GitHub
SVG Rectangle