[nerv_]

<h3>Scroll down / up</h3>

<svg style="width: 200px; height: 200px; background-color: lavenderblush;">
    <rect id="rect" width="100" height="100" fill="lightsalmon"></rect>
</svg>

<script>
    var app = {
        _rect: rect,
        _factor: 0,
        get factor() {
            return this._factor;
        },
        set factor(v) {
            this._factor = v;
            this._factor = Math.max(0, this._factor);
            this._factor = Math.min(50, this._factor);
        },
        refresh: function() {
            this._rect.setAttribute('rx', this.factor);
            this._rect.setAttribute('ry', this.factor);
        }
    };

    document.onwheel = function(event) {
        app.factor += Math.sign(event.deltaY);
        app.refresh();
        return false;
    };

    // ----------------

    Math.sign = function(v) {
        return v/Math.abs(v);
    };
</script>