Javascript 如何在SVG/raphael中的bezier曲线末端绘制箭头?
我有一条由以下公式生成的曲线:Javascript 如何在SVG/raphael中的bezier曲线末端绘制箭头?,javascript,svg,raphael,Javascript,Svg,Raphael,我有一条由以下公式生成的曲线: var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", arrow_left_x, arrow_left_y, "L", arrow_right_x, arrow_right_y, "L", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(","); 但是我的箭没有射中。 -它只指向
var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", arrow_left_x, arrow_left_y, "L", arrow_right_x, arrow_right_y, "L", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
但是我的箭没有射中。-它只指向右侧,不指向与贝塞尔曲线末端的曲线坡度相同的方向。 -它没有填满 现在,我知道我没有正确地计算,但主要是,我只想知道如何填充直线末端的三角形。谢谢 出于演示目的:
arrow_left_x = (x1 - 8);
arrow_left_y = (y1 - 8);
arrow_right_x = (x1 - 8);
arrow_right_y = (y1 + 8);
这是获取我使用的坐标的代码。我想你应该使用标记。看一看 编辑: 您需要在
defs
部分中创建一个标记:
var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker.setAttribute('id', 'Triangle');
marker.setAttribute('viewBox', '0 0 16 16');
marker.setAttribute('refX', '0');
marker.setAttribute('refY', '6');
marker.setAttribute('markerUnits', 'strokeWidth');
marker.setAttribute('markerWidth', '16');
marker.setAttribute('markerHeight', '12');
marker.setAttribute('orient', 'auto');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
marker.appendChild(path);
path.setAttribute('d', 'M 0 0 L 16 8 L 0 16 z');
path.setAttribute('stroke', '#000');
path.setAttribute('stroke-width', '1');
path.setAttribute('style', ' marker-start :none; marker-end :none; ');
document.getElementById( id_of_svg_placeholder ).getElementsByTagName('svg')[0].appendChild(defs);
defs.appendChild(marker);
并在CSS中引用它:
path {marker-start:url("#Triangle")}
或作为属性:
<path d="..." marker-start="url(#Triangle)" />
好的,我现在知道它是如何工作的了。但是,它不适合Raphael,因为它使用标记,而不是属性,如果您以某种方式编辑您的答案,我会将否决票更改为赞成票。或者,如果你能想出如何在这里得到标记:这将是令人敬畏的我希望这是你需要的。不要害怕使用本机DOM方法。可能是拉斐尔与创建SVG标记不兼容,而不是相反。另外,我想对提供帮助并给出你问题答案的人投反对票也不太友好。除非你编辑你的答案,否则我不能投反对票这正是我需要的!你真棒!谢谢thas也很容易在我的新代码中实现:“投票否决提供帮助的人并不太友好”#TrueStorySee。现在Raphael 2.1有了一个路径属性对,
箭头开始
和箭头结束
,请参见