Preventがトリミングされてから頭を矢印

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>

あなたはこのスケールアップのスクリーンショットで見ることができるように、それは一種の：

しかし、ルックスは私の期待から多くのことを異なります

完全な矢頭を見て、正方形の角を得ることは可能ですか？ Details on how markers are renderedから

Answer 1

：

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>