55 lines
1.6 KiB
HTML
55 lines
1.6 KiB
HTML
<!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>
|