Wie platziere ich Pfeilspitzendreiecke auf SVG-Linien?

Question

Aug 04, 2012, 02:57 PM

Wie platziere ich Pfeilspitzendreiecke auf SVG-Linien?

Ich bin neu in SVG und ich versuche, eine gerade Linie zwischen zwei Punkten zu zeichnen. Ich habe es bisher mit folgendem Befehl geschafft:

<line x1="50" y1="50" x2="150" y2="150" style="stroke:rgb(255,255,0); stroke-width:2" stroke-dasharray="5,3" />"

Was ist der einfachste Weg, um winzige Dreiecke oder Pfeilspitzen (in gleichmäßigen Abständen) über diese Linie zu setzen, um die Richtung anzuzeigen?

Bearbeiten 1:

Um es klarer zu machen, ich bin nicht nach einem Pfeil am Ende der Linie, sondern nach mehreren Dreiecken (gleichmäßig verteilt) entlang der gesamten Linie. Nach Möglichkeit möchte ich jeden Strich in der gestrichelten Linie durch ein Dreieck ersetzen, das in Richtung der Linie zeigt.

Bearbeiten 2

Auf Vorschlag von Phrogz habe ich eine Seite wie unten gezeigt erstellt, aber es wird nichts angezeigt. Was mache ich falsch?

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/com.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 70 90">
<defs>
<marker id="t" markerWidth="4" markerHeight="4"
        orient="auto" refY="2">
  <path d="M0,0 L4,2 0,4" />
</marker>
</defs>
<polyline points="0,0 0,50 20,70 40,10 42,8 44,10, 46,14 50,50" />
</svg>
<script type="text/javascript">
midMarkers(document.querySelector('polyline'),6);

    // Given a polygon/polyline, create intermediary points along the
    // "straightaways" spaced no closer than `spacing` distance apart.
    // Intermediary points along each section are always evenly spaced.
    // Modifies the polygon/polyline in place.
    function midMarkers(poly,spacing){
        var svg = poly.ownerSVGElement;
        for (var pts=poly.points,i=1;i<pts.numberOfItems;++i){
            var p0=pts.getItem(i-1), p1=pts.getItem(i);
            var dx=p1.x-p0.x, dy=p1.y-p0.y;
            var d = Math.sqrt(dx*dx+dy*dy);
            var numPoints = Math.floor( d/spacing );
            dx /= numPoints;
            dy /= numPoints;
            for (var j=numPoints-1;j>0;--j){
                var pt = svg.createSVGPoint();
                pt.x = p0.x+dx*j;
                pt.y = p0.y+dy*j;
                pts.insertItemBefore(pt,i);
            }
            if (numPoints>0) i += numPoints-1;
        }
    }
</script>
</body>
</html>