I'm creating maps of parking lots using Vue2Leaflet, which leverages the Leaflet.js library. I want to implement a feature where the used capacity of a lot is shown with a gradient fill color. A hard edged gradient of red and green would approximate a battery meter. The more red there is, the less capacity is available. Vue2Leaflet exposes a :fill-color
prop on Leaflet Polygons, but it takes a string. The ways I know how to make a gradient on the web are either a bunch of CSS rules for background-color
or using <svg>
elements. Has anyone successfully made gradient polygons while using Leaflet?