<!DOCTYPE html>
<html>
<head>
<script>
function startTest() {
starPath(document.getElementById("marker-path-cw"), true, 110, 110, 56, 8, 36, 80, Math.PI/6);
starPath(document.getElementById("marker-path-ccw"), false, 310, 110, 56, 8, 36, 80, Math.PI/6);
}
// Generate a star path
// cw - true for clockwise, false for counter-clockwise
// centered at (cx,cy)
// radius r
// s 'spikes' of length l
// n total vertices
// t rotation
function starPath(el, cw, cx, cy, r, s, l, n, t) {
var d = "";
for (var i=0; i<=2*Math.PI; i+=2*Math.PI/n) {
var a = cw ? i : -i;
var px = cx + (r+l*Math.cos(a*s))*Math.sin(a+t);
var py = cy + (r+l*Math.cos(a*s))*Math.cos(a+t);
d += (d.length ? "L" : "M") + px + " " + py;
}
el.setAttribute("d", d);
}
</script>
<style>
#marker-path-cw {
stroke: green;
}
#marker-path-ccw {
stroke: blue;
}
.marker-path {
fill: none;
stroke-width: 2px;
marker-mid: url(#marker);
}
</style>
</head>
<body onload="startTest()">
Test for wkbug.com/112054.
This test passes if the green star has orange markers pointing outside only and the blue star has orange markers pointing inside only.<br/>
<svg width="500" height="500">
<marker id="marker" markerWidth="15" markerHeight="15" orient="auto">
<!-- This marker points in the direction of the bisector angle. -->
<path d="M0 0L4 0L2 5L0 0Z" fill="orange" stroke-width='0.5px' stroke='black'/>
</marker>
<path id="marker-path-cw" class="marker-path"/>
<path id="marker-path-ccw" class="marker-path"/>
</svg>
</body>
</html>
Codebase Browser
chromium