Skip to content
This repository has been archived by the owner on Aug 10, 2024. It is now read-only.

Apply internal CSS styles

Jump to bottom
bartbutenaers edited this page Sep 22, 2020 · 2 revisions

There are 3 ways to apply a CSS style to an element:

  1. Inline CSS: via the style attribute on an SVG element, a style can be specified that only applies to that single element. For example:

    <svg height="100" width="100">
   <circle cx="50" cy="50" r="40" style="fill:red;"/>
</svg>

  2. Internal CSS: An internal style is defined inside the <style> element in the current html page. This stylesheet can be included in the head section of the html page, or inside the SVG as in the next example (where a style is applied to all elements that have class "some_class"):

    <svg height="100" width="100"> 
   <defs>
      <style type="text/css"><![CDATA[
         .some_class {
            fill:red;
         }
      ]]></style>
   </defs>
 
   <circle class="some_class" cx="50" cy="50" r="40"/>
</svg>

  3. External CSS: this is rather similar to an internal style, however now the stylesheet is stored into an external file (i.e. not in the current html file). Which allows you to reuse the same stylesheet in multiple html files, e.g. to create a theme. The stylesheet should be loaded in the head of the html page:

    <head>
   <link rel="stylesheet" href="mystyle.css">
</head>

Since inline CSS is used in most examples in this Github repository, this will not be described here further. And the external CSS styles can be used very similar as internal CSS styles. However much more extra setup is required in Node-RED, which is outside the scope of this SVG node tutorial ... Therefore the example flow below will demonstrate the use of the internal CSS style, more specific how to apply internal styles dynamically (by changing the class of an SVG element):

This is the end of Node-RED ...

svg_node_green

[{"id":"1699a2cd.115cdd","type":"ui_svg_graphics","z":"2203d76d.b17558","group":"95485f56.baef3","order":1,"width":"7","height":"7","svgString":"<svg x=\"0\" y=\"0\" height=\"240\" viewBox=\"0 0 480.00002 479.99999\" width=\"240\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">    \n    <defs>\n        <style type=\"text/css\"><![CDATA[\n            .node_red {\n                fill:#8F0000;\n            }\n            .node_green {\n                fill:lightgreen;\n            }\n        ]]></style>\n    </defs>\n    \n    <g transform=\"translate(0 -572.36)\">\n        <rect id=\"shape_1\" style=\"color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto\" ry=\"56\" height=\"448\" width=\"448\" y=\"588.36\" x=\"16\" fill=\"#8f0000\"/>\n        <g transform=\"matrix(8.545 0 0 8.545 -786.19 -1949.8)\">\n           <path id=\"shape_2\" style=\"color-rendering:auto;text-decoration-color:#ffffff;color:#ffffff;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none\" d=\"m104.41 321.21c0.0138-2.3846-1.905-4.2806-4.2896-4.2806h-6.243v2.9257h6.243c0.80513 0 1.4808 0.58383 1.4808 1.389v4.2422c0 0.80513-0.67566 1.5075-1.4808 1.5075h-6.243v2.8086h6.243c2.3846 0 4.2895-1.9315 4.2895-4.3162l-0.00005-1.9812c9.8659 0.14125 12.737 2.7065 15.877 5.4519 3.0241 2.6446 6.4153 5.4869 15.252 5.557l0.00046 0.97238c0.001 2.3846 1.9543 4.3803 4.3389 4.3803h6.4273v-3.0427h-6.4273c-0.80514 0-1.4135-0.53255-1.4135-1.3377v-4.2422c0-0.80513 0.60835-1.4418 1.4135-1.4418h6.4273v-2.8086h-6.4273c-2.3846 0-4.3379 1.8658-4.3389 4.2504l-0.00045 1.005c-8.351-0.0276-10.723-2.3434-13.76-4.9992-2.5914-2.2662-5.6368-4.7578-12.346-5.6642 0.0583-0.0501 0.11211-0.0987 0.16838-0.15027 1.2918-1.1846 1.9884-2.6158 2.6699-3.8516 0.68148-1.2357 1.3227-2.267 2.373-2.9879 0.85207-0.58483 2.0639-1.0208 3.926-1.1017l0.00018 0.99192c0.00043 2.3846 1.9236 4.4325 4.3083 4.4325h17.242c2.3846 0 4.3127-2.0479 4.3127-4.4325v-4.2422c0-2.3846-1.9281-4.3153-4.3127-4.3153h-17.242c-2.3846 0-4.3095 1.9306-4.3083 4.3153l0.00051 0.98395c-2.2474 0.0903-3.9508 0.6357-5.2079 1.4985-1.5245 1.0464-2.3662 2.4764-3.0762 3.7637-0.70992 1.2873-1.3108 2.4408-2.2188 3.2734-0.79034 0.72475-1.8834 1.2844-3.658 1.493zm18.468-12.356h17.242c0.80514 0 1.387 0.58455 1.387 1.3897v4.2422c0 0.80514-0.5819 1.3898-1.387 1.3898h-17.242c-0.80514 0-1.4994-0.58462-1.4994-1.3898v-4.2422c0-0.80513 0.69431-1.3897 1.4994-1.3897z\" fill=\"#fff\"/>\n        </g>\n    </g>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"Node-RED logo","x":840,"y":1840,"wires":[[]]},{"id":"fca2de1f.f5d4d","type":"inject","z":"2203d76d.b17558","name":"Apply node_red style","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"set_attribute\",\"selector\":\"[id^=shape_]\",\"attributeName\":\"class\",\"attributeValue\":\"node_red \"}","payloadType":"json","x":600,"y":1820,"wires":[["1699a2cd.115cdd"]]},{"id":"ff1b0322.5f1b5","type":"inject","z":"2203d76d.b17558","name":"Apply node_green style","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"set_attribute\",\"selector\":\"[id^=shape_]\",\"attributeName\":\"class\",\"attributeValue\":\"node_green\"}","payloadType":"json","x":600,"y":1880,"wires":[["1699a2cd.115cdd"]]},{"id":"95485f56.baef3","type":"ui_group","z":"","name":"Node-RED or Node-GREEN ...","tab":"e5c23ea3.6847d","order":1,"disp":true,"width":"30","collapse":false},{"id":"e5c23ea3.6847d","type":"ui_tab","z":"","name":"SVG demo","icon":"dashboard","order":15,"disabled":false,"hidden":false}]
Clone this wiki locally