D3js方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg width="300" height="200">
</svg>
</body>
<script>
var svg = d3.select('svg');
var marker =
svg.append("marker")
.attr("id", "arrow")
.attr("markerUnits","strokeWidth")
.attr("viewBox", "0 0 12 12")
.attr("refX", 6)
.attr("refY", 6)
.attr("markerWidth", 12)
.attr("markerHeight", 12)
.attr("orient", "auto")
.append("path")
.attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
.attr('fill', '#f00');
var line = svg.append("line")
.attr("x1",50)
.attr("y1",10)
.attr("x2",200)
.attr("y2",50)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)");
var curve = svg.append("path")
.attr("d","M20,70 T80,100 T160,80 T200,90")
.attr("fill","white")
.attr("stroke","blue")
.attr("stroke-width",2)
.attr("marker-start","url(#arrow)")
.attr("marker-mid","url(#arrow)")
.attr("marker-end","url(#arrow)");
</script>
</html>
html+d3方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg width="300" height="200">
<defs>
<marker
id="arrow"
markerUnits="strokeWidth"
markerWidth="12"
markerHeight="12"
viewBox="0 0 12 12"
refX="6"
refY="6"
orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #f00;"></path>
</marker>
</defs>
<line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/> -->
<path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"/>
</svg>
</body>
</html>
