jqwidgets径向guage造型背景

时间:2015-10-06 10:46:12

标签: css svg gradient jqwidget

我正在使用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)' }});

但这不起作用。请帮帮我。

谢谢。

1 个答案:

答案 0 :(得分:0)

我不认为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>

将它放在你的页面某处。然后你应该能够通过以下方式将它应用到你的语言中:

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

我会留下中风给你做的。

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