防止被裁剪箭頭頭

Question

我試圖譜寫出SVG箭頭：

svg line { 
 
    stroke-width: 10px; 
 
    stroke: black; 
 
} 
 
svg polyline { 
 
    stroke: orange; 
 
}

<figure> 
 
\t <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="40" height="300"> 
 
    <defs> 
 
     <marker 
 
     id="start" 
 
     markerWidth="3" 
 
     markerHeight="3" 
 
     refX="0" 
 
     refY="1.5" 
 
     orient="auto" 
 
     > 
 
     <polyline points="1.5,0 0,1.5 1.5,3" fill="none" /> 
 
     </marker> 
 
     <marker 
 
     id="end" 
 
     markerWidth="3" 
 
     markerHeight="3" 
 
     refX="1.5" 
 
     refY="1.5" 
 
     orient="auto" 
 
     > 
 
     <polyline points="0,0 1.5,1.5 0,3" fill="none" /> 
 
     </marker> 
 
    </defs> 
 
    <line 
 
     x1="20" y1="50" x2="20" y2="250" 
 
     marker-start="url(#start)" 
 
     marker-end="url(#end)" 
 
    /> 
 
    </svg> 
 
</figure>

正如你可以在這個放大的屏幕截圖中看到，這樣的作品：

然而，看起來與我的預期差別很大：

是否有可能看到完整的箭頭，也可以得到方角？

Answer 1

從Details on how markers are rendered：

overflow="visible" 

svg line { 
 
    stroke-width: 10px; 
 
    stroke: black; 
 
} 
 
svg polyline { 
 
    stroke: orange; 
 
}

<figure> 
 
\t <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="40" height="300"> 
 
    <defs> 
 
     <marker 
 
     id="start" 
 
     markerWidth="3" 
 
     markerHeight="3" 
 
     refX="0" 
 
     refY="1.5" 
 
     orient="auto" 
 
     overflow="visible" 
 
     > 
 
     <polyline points="1.5,0 0,1.5 1.5,3" fill="none" /> 
 
     </marker> 
 
     <marker 
 
     id="end" 
 
     markerWidth="3" 
 
     markerHeight="3" 
 
     refX="1.5" 
 
     refY="1.5" 
 
     orient="auto" 
 
     overflow="visible" 
 
     > 
 
     <polyline points="0,0 1.5,1.5 0,3" fill="none" /> 
 
     </marker> 
 
    </defs> 
 
    <line 
 
     x1="20" y1="50" x2="20" y2="250" 
 
     marker-start="url(#start)" 
 
     marker-end="url(#end)" 
 
    /> 
 
    </svg> 
 
</figure>