SVG<rect>元素使用marker标记无效？如何正确实现？

根据MDN说明，marker可用于矩形元素，但我尝试在<rect>起始处添加波浪线marker时并未生效。想确认矩形元素是否支持marker，或是我的实现存在问题？

示例代码：

export async function drawRect<T extends SVGGraphicsElement>(
  parent: D3Selection<T>,
  node: Node,
  options: RectOptions
) {
   ///some other code 
   ////

    rect = shapeSvg.insert('rect', ':first-child');

    rect
      .attr('class', 'basic label-container')
      .attr('style', nodeStyles)
      .attr('x', x)
      .attr('y', y)
      .attr('width', totalWidth)
      .attr('height', totalHeight)
      .attr('marker-start', 'url(#sequencenumber)');
}

export const insertSequenceNumber = function (elem) {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'sequencenumber')
    .attr('refX', 0)
    .attr('refY', 0)
    .attr('markerWidth', 20)
    .attr('markerHeight', 60)
    .attr('orient', 'auto')
    .attr('overflow', 'visible')
    .append('path')
    .attr('d', 'M0,5 Q5,9 10,5 T20,5')
    .attr('stroke', 'black')
    .attr('stroke-width', 1.2)
    .attr('fill', 'none');
};

SVG的<rect>元素不支持marker-start、marker-mid、marker-end这类marker属性——这些属性仅适用于由路径命令构成的元素，比如<path>、<line>、<polyline>、<polygon>。

<rect>是预定义的基础形状，它的四条边是隐式渲染的，没有明确的路径节点序列，所以marker无法附着到它的“起始点”上，这就是你设置了属性却看不到效果的原因。

解决方案 #

如果你需要给矩形的某个边添加marker，有两种可行的方式：

1. 用<path>代替<rect>绘制矩形
   将矩形转换为路径形式，这样就能利用marker属性。修改你的drawRect函数，把<rect>替换为<path>，用路径命令描述矩形轮廓：

   export async function drawRect<T extends SVGGraphicsElement>(
     parent: D3Selection<T>,
     node: Node,
     options: RectOptions
   ) {
      ///some other code 
      ////
   
       rect = shapeSvg.insert('path', ':first-child');
   
       rect
         .attr('class', 'basic label-container')
         .attr('style', nodeStyles)
         // 路径命令：从左上角出发，向右画宽，向下画高，向左画宽，回到起点
         .attr('d', `M ${x},${y} h ${totalWidth} v ${totalHeight} h ${-totalWidth} z`)
         .attr('marker-start', 'url(#sequencenumber)');
   }
   

   此时marker会附着在路径的起始点（也就是矩形的左上角）。

2. 手动定位marker元素
   不依赖marker属性，直接将定义好的波浪线路径（或marker对应的图形）添加到SVG中，通过坐标定位到矩形的起始位置。这种方式更灵活，适合只需要在固定位置添加一次图形的场景。

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