✨ ensure that context is properly bound
- bind window and document from current context (iframe support).
- bind "this" to computed or relation state element.
@gdeblasi we may not need it for window/document, but if we had more complicated processing to do we could have:
<svg>
<script>
window.formatNumber = function formatNumber(value) {
return (value < 1 && value > -1) ? value.toFixed(2) : value.toPrecision(4);
}
</script>
...
<state>
<property ...>
<direct onupdate='formatNumber' />
</svg>
For the this
binding it may be used to make our update blinker, ex:
<svg>
<script>
window.formatNumber = function formatNumber(value) {
return (value < 1 && value > -1) ? value.toFixed(2) : value.toPrecision(4);
}
</script>
...
<state>
<computed name='tick' onupdate='this.tick = !this.tick'>
<relation query-selector='#tick' attribute-name='opacity' values='0;1;0' />
</svg>
With a strict transition of about 250ms it should do the trick and blink on update (any update).
Edited by Gabriele De Blasi