我在页面上的两个点之间绘制了一个箭头。每次调用时,箭头都会被清除并用不同的点重新绘制。现在线条绘制正确,但末尾没有箭头。我正在使用 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>`
我被难住了。感谢您的帮助!
最佳答案
想通了。我在设置中定义了这个:
$('#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)"
});
关于javascript - jQuery SVG Line stroke-linejoin(编辑 : SVG markers),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22334979/