防止箭头被裁剪

Question

我正在尝试在SVG中编写一个箭头：

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

<figure>
	<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

From Details on how markers are rendered:

overflow="visible"

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

<figure>
	<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>