joeax / svidget

A JavaScript framework for building cool data visualization widgets in SVG.
MIT License
232 stars 26 forks source link

Binding to style element #5

Closed stelzzz closed 7 years ago

stelzzz commented 7 years ago

Hello! Help me please! Is it possible to set binding to style property? Example for Inkscape generated element:

<g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer">
    <path
       sodipodi:type="arc"
       style="fill:#aaff00;fill-opacity:1;stroke:#d3d3d3;stroke-width:0.99844074000000005;stroke-linejoin:miter;stroke-miterlimit:2.61313008999999985;stroke-opacity:1;stroke-dasharray:none"
       id="led"
       sodipodi:cx="27.237488"
       sodipodi:cy="25.480864"
       sodipodi:rx="12.859667"
       sodipodi:ry="12.859667"
       d="m 40.097155,25.480864 a 12.859667,12.859667 0 1 1 -25.719334,0 12.859667,12.859667 0 1 1 25.719334,0 z"
       transform="matrix(1.1302449,0,0,1.1340118,-14.785032,-12.8956)" />
  </g>

I want binding like this:

    <svidget:param
       name="ledColor"
       shortname="color"
       type="string"
       subtype="color"
       binding="#led@style.fill" />
joeax commented 7 years ago

You cannot bind to style properties directly.

You can, however, handle the set event: <svidget:param onset="handleLedColorSet">

Then:

function handleLedColorSet(e) {
  var ele = document.getElementById("led");
  ele.style.fill = e.value; // e.value is value that was set on the param
}
stelzzz commented 7 years ago

Thank you!