Comment placer la tête de flèche triangles sur SVG lignes?

Basé sur une clarification de la question, voici une implémentation de la création d'intermédiaire des points le long d'une <polyline> élément, telles que la marker-mid="url(#arrowhead)" attribut de travail. Voir ci-dessous que pour une introduction à des marqueurs et des pointes de flèches.

Démo: http://jsfiddle.net/Zv57N/

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;
}
}

Le code ci-dessus modifie une <polyline> élément à ajouter des points à chaque espacement unités le long de chaque bord droit. Combinez cela avec marker-mid à la place une rotation du repère à chaque sommet, et vous avez la possibilité de dessiner des arbitrairement complexes, des formes et des graphiques de façon constante le long de votre chemin.

Bien que le code des espaces les points uniformément le long de chaque segment (alors qu'aucun disgracieux 'regrouper' se produit dans les coins) que la démo ci-dessus affiche le code ne supprime pas tous les points que vous avez déjà dans votre chemin d'accès qui sont plus rapprochés que les espacement valeur.

---

(À l'origine de "l'introduction de Marqueurs" suit la réponse.)

---

Vous souhaitez définir un SVG <marqueur> de l'élément et ajouter le marker-start="…" et/ou marker-end="…" des attributs à votre ligne. À l'aide d'un marqueur des copies de n'importe quelle forme sur la fin(s) de votre chemin, et (avec orient="auto") tourne la forme de match.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 200 200">
<defs>
<marker id='head' orient='auto' markerWidth='2' markerHeight='4'
refX='0.1' refY='2'>
<path d='M0,0 V4 L2,2 Z' fill='red' />
</marker>
</defs>    
<path
marker-end='url(#head)'
stroke-width='5' fill='none' stroke='black'  
d='M0,0 C45,45 45,-45 90,0'
/>    
</svg>​

Démo: http://jsfiddle.net/Z5Qkf/1/

Ci-dessus:

• orient="auto" provoque le marqueur de tourner avec la ligne
• markerWidth et markerHeight définir un cadre de sélection (comme un viewBox) à utiliser pour le marqueur.
  • Noter que ceux-ci sont ensuite mis à l'échelle par le stroke-width de la dernière ligne; ayant une hauteur de "4" provoque de 20 unités de large dans le dessin final (4×5).
• refX et refY de définir l'emplacement de la 'l'origine' est lors de la passation de la forme sur la fin du chemin
  • J'ai utilisé refX="0.1" pour s'assurer que le marqueur chevauche la fin de la ligne légèrement
• Pour l'orientation automatique fonctionne correctement, vous voulez que le "en avant" de la direction de la marque à être dans l' +x. (Le rouge chemin d'accès utilisé pour le marqueur ressemble à ceci ▶ lorsque aucune rotation.)
• Vous pouvez ajuster la fill-opacity et stroke-opacity du marqueur et/ou de la ligne de façon indépendante, mais les modifications apportées à la opacity de la ligne va affecter le dessiné au marqueur, ainsi.
  • Depuis la ligne et le marqueur se chevauchent, si vous baissez la fill-opacity de le marqueur que vous souhaitez voir les chevauchements; toutefois, si vous baissez la opacity de la ligne elle-même alors le marqueur est composée entièrement opaque sur la ligne et la combinaison des deux est ensuite descendu dans l'opacité.
    
    

---

Si vous voulez des flèches le long de la longueur de la ligne, vous aurez besoin d'utiliser marker-mid="…" soit avec <path> ou <polyline> et intermédiaires le long de la ligne.

Démo: http://jsfiddle.net/Z5Qkf/2/

Le seul problème est que tout point qui change de direction le long de la ligne les dégâts de l'orientation; c'est pourquoi, dans la démo, j'ai utilisé une courbe de Bézier à un angle de sorte que le point central sur la ligne le long d'une section droite.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 200 200">
<defs>
<marker id='mid' orient="auto"
markerWidth='2' markerHeight='4'
refX='0.1' refY='1'>
<!-- triangle pointing right (+x) -->
<path d='M0,0 V2 L1,1 Z' fill="orange"/>
</marker>
<marker id='head' orient="auto"
markerWidth='2' markerHeight='4'
refX='0.1' refY='2'>
<!-- triangle pointing right (+x) -->
<path d='M0,0 V4 L2,2 Z' fill="red"/>
</marker>
</defs>
<path
id='arrow-line'
marker-mid='url(#mid)'
marker-end='url(#head)'
stroke-width='5'
fill='none' stroke='black'  
d='M0,0 L20,20 C40,40 40,40 60,20 L80,0'
/>
</svg>​

Pour ce faire, sur le plan procédural, vous pouvez utiliser le JavaScript et le getPointAtLength() de commande pour un chemin d'accès à exemple le chemin d'accès.