JQuery SVG：笔划线连接：圆形答案

【问题标题】：JQuery SVG: stroke-linejoin: roundJQuery SVG：笔划线连接：圆形
【发布时间】：2013-02-12 20:38:04
【问题描述】：

我正在尝试使笔划线具有圆形连接。为什么下面的代码不起作用？

$('body').svg({onLoad: function(svg){
    var path = svg.createPath();
    svg.path(
        path.move( 50, 50 )
        .line( 300, 0, true )
        .line( 0, 300, true )
        .line( -300, 0, true )
        .close(),
        {
            fill: 'none', 
            stroke: '#888', 
            strokeWidth: 30,
            strokeLinejoin: 'round'
        }
    );  
}});

根据this OReilly documentation，我需要的style属性和值是stroke-linejoin和round。并根据 JQuery-SVG 文档：

应编写在 SVG 中包含破折号 (-) 的附加设置在没有破折号的骆驼情况下

所以我不明白为什么它不起作用。

谢谢

更新：我有 forked the JSFiddle here ，似乎在输出 SVG XML 时，它没有将驼峰式属性转换为带有破折号的属性。现在只是想弄清楚如何纠正它。它输出的 SVG XML 是：

<svg version="1.1" width="400" height="400">
    <path d="M50,50l300,0l0,300l-300,0z" fill="none" stroke="#888" stroke-width="30"
         strokeLinejoin="round"></path>
</svg>

【问题讨论】：

标签： javascript svg jquery-svg

【解决方案1】：

我不得不改变：

strokeLinejoin: 'round'

到：

strokeLineJoin: 'round'

【讨论】：