Question

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

$('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，我需要的样式属性和值为stroke-linejoin和round。并根据JQuery-SVG文档：

应编写SVG中包含短划线（ - ）的其他设置在驼峰的情况下没有破折号

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

由于

更新：我forked the JSFiddle here，在输出SVG XML时，它似乎没有将camel-case属性转换为带有破折号的属性。现在只是想弄清楚如何纠正它。它输出的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>

Answer 1

我不得不改变：

strokeLinejoin: 'round'

为：

strokeLineJoin: 'round'

JQuery SVG：stroke-linejoin：round

1 个答案: