ストロークラインに丸みを帯びた結合を持たせようとしています。以下のコードが機能しないのはなぜですか?
この JSFiddleを参照してください。
$('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'
}
);
}});
この OReilly のドキュメントによると、必要なスタイル プロパティと値はstroke-linejoin
andround
です。JQuery-SVG のドキュメントによると、次のようになります。
SVG でダッシュ (-) を含む追加設定は、ダッシュなしでキャメルケースで記述する必要があります。
だから、なぜそれが機能していないのかわかりません。
ありがとう
更新:ここで JSFiddle をフォークしました。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>