Question

我在页面上的两个点之间画一个箭头。每次调用此箭头时，箭头都会被清除并重新绘制不同的点。现在线条正确绘制，但最后没有箭头。我正在使用jQuery SVG plugin

var svg = $('#board').svg('get');
svg.clear();
var startX = fromCol*sideLen + sideLen/2;
var startY = fromRow*sideLen + sideLen/2;
var endX = toCol*sideLen + sideLen/2;
var endY = toRow*sideLen + sideLen/2;
svg.line(startX, startY, endX, endY, {
    strokeWidth: 5
    , stroke: 'yellow'
    , strokeLineCap: 'round'
    , strokeLineJoin: 'miter'
});

驼峰式变量设置为正确的CSS属性，我仔细检查了它。 DOM中此代码的示例输出是

`<line x1="375" y1="325" x2="325" y2="275" stroke-width="5" stroke="yellow" stroke-linecap="round" stroke-linejoin="miter"></line>`

我很难过。谢谢你的帮助！

Answer 1

想出来。我在设置中定义了这个：

$('#board').svg();
var svg = $('#board').svg('get');
// Adds a marker to the svg defs element
var defs = svg.defs();
var marker = svg.marker(defs, 'arrow', 3, 2, 5, 5, 'auto');
// Define the shape of the marker
svg.polyline(marker, [[0,0], [4,2], [0,4], [1,2]], {
    "fill"  : "yellow"
});

在绘制线条时调用此方法，类似于之前的方法，但使用新设置和ID。

var svg = $('#board').svg('get');
var g = svg.group({stroke: 'yellow', strokeWidth: 5});
svg.line(g, startX, startY, endX, endY, {
    "id" : "line"
    , "strokeLineCap" : "round"
    , "marker-end"  : "url(#arrow)"
});

jQuery SVG Line stroke-linejoin（编辑：SVG标记）

1 个答案: