Cómo utilizar una flecha marcador en SVG <line> elemento?

Necesito crear una flecha en d3.js pero todo lo que puedo encontrar son ejemplos con los diagramas de nodos. Lo que necesito es simplemente hacer una flecha que va desde el punto a al punto B.

Traté de aplicar la parte del código en el ejemplo siguiente: http://bl.ocks.org/1153292

Esta parte específica:

svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

Pero como he dicho antes, no me parece la manera de crear la flecha con un svg:line
agradecemos enormemente la ayuda que me puedan dar.

  • svg:línea sólo se puede ir de a a B y sólo chuck norris puede pintar una flecha en un solo golpe. trate de polilínea o la ruta…
  • Posibles duplicados de Flecha triángulos en mi SVG línea
InformationsquelleAutor Cristian G | 2012-10-01

1 Kommentar

  1. 58

    Si significaba » ¿cómo puedo utilizar una flecha marcador en un <line> elemento?’, entonces aquí es cómo hacerlo:

    <line x1="100" y1="230" x2="300" y2="230" 
     marker-end="url(#yourMarkerId)" stroke="black" stroke-width="10"/>

    He aquí un completo ejemplo. Y tenga en cuenta que marker-end es una propiedad de css, por lo que también puede poner esa parte en una hoja de estilo, si quieres.

    Si usted quiere que quiero llamar su marcador con líneas, a continuación, sólo añadir lo que las líneas que usted necesita como un hijo de el marcador de elemento (y asegúrese de utilizar el sistema de coordenadas definido por el marcador del viewBox atributo).

    • en el marcador de inicio y el marcador final está funcionando correctamente pero en medio de la línea no funciona…por favor, puedes comprobar en jsfiddle.net/dqoL07cn
    • que realmente debería ser una nueva pregunta, como que iba a ayudar a otros a encontrar la respuesta más fácil. De todos modos, a mediados de los marcadores en realidad requiere un mediados del segmento, creo e.g una polilínea con tres puntos. El marcador de inicio sería el punto de partida, el marcador final el punto final, y la mitad de marcador podría ser utilizado en todo los puntos entre el fin y los puntos de inicio. Consulte jsfiddle.net/dqoL07cn/2 para la polilínea solución.
    • muchísimas gracias por su amable respuesta

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea