Javascript 使用Highcharts渲染器设置笔划宽度动画

我正在使用Highcharts SVG渲染API（渲染器）绘制自定义图表，并希望为rect的“笔划宽度”属性设置动画。Highcharts文档中提供的示例，但它似乎工作不正常-除了笔划宽度之外，所有属性都已更改。
如果我在Chrome DevTools中打开HTML，我可以看到如下内容：

<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray"
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect>

笔划宽度是使用驼峰样式名称而不是短划线样式名称设置的

---

可能有解决办法吗？

是的，有解决办法。可以通过使用jQuery的attr（）函数来实现这一点。单击矩形时，将更改“笔划宽度”属性

我仍然认为这是一个很好的观点，可以作为API的一个bug来报告

无论如何，JS代码将如下所示：

$(function () {
    var renderer = new Highcharts.Renderer(
            $('#container')[0],
            400,
            300
        ),
        rect = renderer.rect(100, 100, 100, 100, 5)
            .attr({
                'stroke-width': 2,
                stroke: 'gray',
                fill: 'silver',
                zIndex: 3
            })
            .on('click', function () {
                rect.animate({
                    x: 50,
                    y: 50,
                    width: 200,
                    height: 20
                })
                $("rect").attr("stroke-width", "30"); // here you can change the stroke-width               
            })
            .add();
});

要在这里看到它的作用，请调整

---

第2版

根据你的评论，我编辑代码。在这种情况下，还可以为笔划宽度设置动画。这是一个简单的解决方案。另一个解决方案是调整原来的Highcharts库，我不推荐这样做。无论如何，希望它能帮助：

$(function () {
    var renderer = new Highcharts.Renderer(
            $('#container')[0],
            400,
            300
        ),
        rect = renderer.rect(100, 100, 100, 100, 5)
            .attr({
                'stroke-width': 2,
                stroke: 'gray',
                fill: 'silver',
                zIndex: 3
            })
            .on('click', function () {
                rect.animate({
                    x: 50,
                    y: 50,
                    width: 200,
                    height: 20
                })
                $("rect").animate(
                    { "stroke-width": "10" },
                    {
                        duration: 500, 
                        step: function(now) { $(this).attr("stroke-width", now); }
                    });                
            })
            .add();
});

持续时间可以根据您的需要进行调整。

---

请在此处查看它的实际操作：

谢谢，@Rotan075。不幸的是，此解决方案不会设置笔划宽度的动画，它会立即更改它。@rebelraven您也可以使用jQuery对其进行调整。也许不是一个顺利的解决方案，但我想它会接近你的喜好。看看我修改过的答案。谢谢，@Rotan075。第二个版本看起来像我需要的。尽管如此，我还是把这个问题发布到了Highcharts Github repo是的，很好！很高兴我能帮助创建某种变通方法！；）希望他们能解决这个“错误”@rebelraven