SVG: allinea la punta di "marker-end" con la fine della riga

Question

Sto disegnando una linea SVG con un "marker-end" per trasformarla in una freccia. Disegna la punta di freccia che si estende oltre la fine della linea, rendendo l'intera freccia più lunga, ma vorrei che l'intera freccia abbia la stessa lunghezza della linea originale. Cioè, la punta della punta della freccia dovrebbe essere sul punto finale della linea. Come lo faccio?

Rendere la linea più breve per adattarsi alle dimensioni della punta della freccia non funzionerà. La dimensione della punta della freccia dipende dallo spessore della linea (che è buona), ma non conosco lo spessore perché può essere specificato in un elemento di stile che è già stato scritto nel documento SVG.

In questo esempio, mi piacerebbe che la punta della freccia fosse interamente all'interno del quadrato, con la punta nell'angolo del quadrato, piuttosto che sporgere dal quadrato.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
      <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>

Answer 1

Impostazione del refX atribute a 60 (che credo possa essere la larghezza della punta della freccia quando orientata punta a destra) sembra per risolvere questo problema. Scalare la larghezza sembra andare bene, non sono sicuro degli altri attributi.

Non sono un esperto di SVG, ho trovato questo interessante e ho giocato con gli attributi finché non sono incappato in questa soluzione, quindi prendila con un pizzico di sale.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
     <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
    <marker id="arrowhead1" viewBox="0 0 60 60" refX="60" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
     <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
    <marker id="arrowhead2" viewBox="0 0 60 60" refX="60" refY="30" markerUnits="strokeWidth" markerWidth="16" markerHeight="10" orient="auto"> 
 
     <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> 
 
<line marker-end="url(#arrowhead1)" x1="1" y1="100" x2="50" y2="50" stroke="#800000" /> 
 
<line marker-end="url(#arrowhead2)" x1="100" y1="1" x2="50" y2="50" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>

Answer 2

reFX e controllo refY che così regolare come necessario. Per esempio.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="44" refY="34" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
      <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>

Answer 3

Usa "marcatore-start" invece di "marcatore-end", disegnano la freccia indietro e scambiare punti finali della linea.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
      <path d="M 60 0 L 0 30 L 60 60 z" fill="#800000" /> </marker> 
 
<line marker-start="url(#arrowhead0)" x1="100" y1="100" x2="1" y2="1" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>