css - jqwidgets 径向 guage 样式背景

Question

我正在使用 jqwidgets。在那些小部件中，我使用的是径向量规。对于那个径向仪表，我想给出径向背景色。我有一个类似这样的代码，用于更改径向仪表中的背景颜色。

$('#gauge').jqxGauge({ style: { fill: '#cccccc', stroke: '#cccccc' }});

在上面的代码中我尝试过这样的事情，

$('#gauge').jqxGauge({ style: { fill: 'linear-gradient(to top, #000 19%, #000 41%, #232323 49%, #fff)', stroke: 'linear-gradient(to top, #000 19%, #000 41%, #232323 49%, #fff)' }});

但这行不通。请帮助我。

谢谢。

Answer 1

我认为 CSS 渐变不能用作 SVG 填充。

因此，您需要在嵌入页面的 SVG 中定义渐变。然后您可以将它们作为您的仪表的引用。

因此，例如，填充的等效 SVG 渐变定义为:

<svg width="0" height="0">
    <defs>
        <linearGradient id="gaugefill" x1="0" y1="1" x2="0" y2="0">
            <stop offset="19%" stop-color="#000"/>
            <stop offset="41%" stop-color="#000"/>
            <stop offset="49%" stop-color="#232323"/>
            <stop offset="100%" stop-color="#fff"/>
        </linearGradient>
    </defs>
</svg>

把它放在你页面的某个地方。然后你应该能够将它应用到你的 guage 中:

$('#gauge').jqxGauge({ style: { fill: 'url(#gaugefill)', stroke: '#ccccc` }});

我会把一笔画留给你做。

附言。免责声明:我没有使用过这些小部件，所以这只是一个有根据的猜测。