Einen Pfeil zwischen zwei Kreisen zeichnen?
Wie kann ich eine Pfeillinie zwischen zwei Kreisen zeichnen, vorausgesetzt:
Lage der Zentren der CirlcesRadius der Kreiseich benutzeLinie undMarker SVG-Objekte.
Wenn ich die Pfeile in die "Mitte" des Kreises ziehe, ist der Pfeil unsichtbar. Wenn ich den Pfeil zu weit nach hinten bewege, wird das spitze Ende des Pfeils durch die Linie angezeigt und ausgeblendet (hier zur besseren Sichtbarkeit übertrieben):
Auf Anfrage hier die relevanten Teile meines Codes (im Livescript):
# Draw an arrow to use for lines
svg.append("svg:defs")
.append("svg:marker")
.attr("id", "arrow")
.attr("viewBox", "0 0 10 10")
.attr("refX", 27)
.attr("refY", 5)
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", 8)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M 0 0 L 10 5 L 0 10 z")
svg.append("line")
.attr "x1" 5
.attr "x2" 50
.attr "y1" 5
.attr "y2" 50
.style "stroke" "black"
.attr "stroke-width" 2
.attr "marker-end" "url(\#arrow)"
Alternativ ist hier JSFiddle des Arbeitsbeispiels (beachten Sie, dass die Pfeile "zappeln", um genau richtig auszusehen):http://jsfiddle.net/yeQS2/