使用HTML的div标签绘制箭头，精确90度时箭头消失问题求助

核心问题分析 #

1. SVG视口裁剪：你的SVG设置了height="0"和width="0"，可视区域为0。非90度箭头时，标记部分落在视口侥幸显示；但90度（完全水平/垂直）时，箭头刚好完全超出视口，直接被裁剪消失。
2. Marker参考点错误：markerArrowEnd的refX设为2，但它的箭头尖端在(10,6)，参考点和尖端错位，导致90度时箭头和线条端点偏移，进一步加剧裁剪问题。
3. 代码冗余：重复的<defs>标签没必要，可合并优化。

修复步骤 #

1. 修正SVG视口 #

给SVG设置足够容纳箭头的尺寸，或用viewBox定义视口范围，同时开启overflow: visible避免裁剪：

<svg viewBox="0 0 20 20" width="20" height="20" style="overflow: visible;">

2. 调整Marker参考点 #

把markerArrowEnd的refX改成箭头实际尖端位置10，让箭头精准对齐线条端点：

<marker id="markerArrowEnd" markerWidth="13" markerHeight="13" refX="10" refY="6" orient="auto">
  <path d="M10, 2 L10,11 L2,6 L10, 2" style="fill: #000000;" />
</marker>

3. 正确关联箭头标记 #

确保<line>元素绑定定义好的marker，否则箭头根本不会生效（如果是动态绑定，检查90度时的绑定逻辑是否异常）：

<line x1="0" y1="0" x2="100" y2="0" 
      marker-start="url(#markerArrow)" 
      marker-end="url(#markerArrowEnd)"
      vector-effect="non-scaling-stroke" 
      style="stroke:rgb(0,0,0);stroke-width:1" />

4. 合并冗余代码 #

把两个marker放在同一个<defs>标签里，简化结构：

<defs>
  <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
    <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
  </marker>
  <marker id="markerArrowEnd" markerWidth="13" markerHeight="13" refX="10" refY="6" orient="auto">
    <path d="M10, 2 L10,11 L2,6 L10, 2" style="fill: #000000;" />
  </marker>
</defs>

完整修复后代码示例 #

<div class="object-added arrowline" style="top:${shapeValues.top}px; left:${shapeValues.left}px">
  <svg viewBox="0 0 20 20" width="20" height="20" style="overflow: visible;">
    <defs>
      <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
        <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
      </marker>
      <marker id="markerArrowEnd" markerWidth="13" markerHeight="13" refX="10" refY="6" orient="auto">
        <path d="M10, 2 L10,11 L2,6 L10, 2" style="fill: #000000;" />
      </marker>
    </defs>
    <line x1="0" y1="0" x2="100" y2="0" 
          marker-start="url(#markerArrow)" 
          marker-end="url(#markerArrowEnd)"
          vector-effect="non-scaling-stroke" 
          style="stroke:rgb(0,0,0);stroke-width:1" />
  </svg>
</div>

额外注意 #

如果线条坐标是动态生成的，要避免出现x1=x2且y1=y2的情况——这种线条本身不存在，箭头自然也看不到。

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