如何合并SVG路径？删除箭头路径并与直线路径合并

修改思路 #

原SVG通过两个<path>分别实现折线和末端箭头，我们可以利用SVG的<marker>元素定义箭头样式，将其绑定到折线路径的末端，从而合并为单个路径，同时移除独立的箭头路径。

修改后的完整SVG代码 #

<svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1878px; min-height: 2602px; position: absolute; background-image: none;">
  <defs>
    <!-- 定义末端箭头标记 -->
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10"/>
    </marker>
  </defs>
  <g>
    <g></g>
    <g>
      <g transform="translate(0.5,0.5)" style="visibility: visible; cursor: move;" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <!-- 单个路径，通过marker-end绑定箭头 -->
        <path d="M 664 821 L 814 821 L 814 1144.63" fill="none" stroke="black" stroke-miterlimit="10" pointer-events="stroke" marker-end="url(#arrow)"></path>
      </g>
      <g transform="translate(0.5,0.5)" style="visibility: visible; cursor: move;">
        <rect x="544" y="791" width="120" height="60" fill="#ff3333" stroke="#000000" pointer-events="all"></rect>
      </g>
      <g transform="translate(0.5,0.5)" style="visibility: visible; cursor: move;">
        <ellipse cx="814" cy="1191" rx="60" ry="40" fill="#3333ff" stroke="#000000" pointer-events="all"></ellipse>
      </g>
    </g>
    <g>
      <g transform="translate(0.5,0.5)" style="cursor: move; visibility: visible;">
        <rect x="542" y="789" width="124" height="64" fill="none" stroke="white" stroke-opacity="0.3" stroke-width="15" pointer-events="stroke" visibility="hidden"></rect>
        <rect x="542" y="789" width="124" height="64" fill="none" stroke="transparent" stroke-opacity="0.3" stroke-width="3" pointer-events="stroke"></rect>
      </g>
    </g>
    <g></g>
  </g>
</svg>

关键修改说明 #

• 新增<defs>区块，里面定义了id为arrow的箭头标记：通过viewBox设置箭头坐标范围，refX/refY控制箭头在路径上的附着点，orient="auto"确保箭头始终指向路径延伸方向
• 删除原独立的箭头<path>元素
• 给原折线路径添加marker-end="url(#arrow)"属性，将定义好的箭头绑定到路径末端，实现单个路径带箭头的效果

内容的提问来源于stack exchange，提问作者celal