blob: a3730d9fb5d04d7082e9b7af5a106e2d650076c3 [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" onload="createMarker()">
<defs id="defs">
<marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<rect width="10" height="10" fill="red" stroke="none"/>
</marker>
<marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
<path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
</marker>
</defs>
<g>
<path fill="none" stroke="black" stroke-width="8" marker-start="url(#markerStart)" marker-mid="url(#markerMiddle)" marker-end="url(#markerEnd)" d="M 130 135 L 180 135 L 180 185"/>
</g>
<script>
var defs = document.getElementById("defs");
function createMarker()
{
var marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
marker.setAttribute("id", "markerMiddle");
marker.setAttribute("viewBox", "0 0 10 10");
marker.setAttribute("markerWidth", "2");
marker.setAttribute("markerHeight", "2");
marker.setAttribute("refX", "5");
marker.setAttribute("refY", "5");
marker.setAttribute("markerUnits", "strokeWidth");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "5");
circle.setAttribute("cy", "5");
circle.setAttribute("r", "5");
circle.setAttribute("fill", "green");
circle.setAttribute("stroke", "none");
marker.appendChild(circle);
defs.appendChild(marker);
}
</script>
</svg>