【问题标题】：SVG marker id can't be found找不到 SVG 标记 ID
【发布时间】：2019-07-10 09:28:24
【问题描述】：

我有一个网络阻止列表。这个 web 块有每个 div，下面是我根据发送的 Id 显示的代码。

这些是每个 div 的代码：

Div1

 <svg width='200' height='176'>
      <defs>
        <marker id='arrowThree' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
          <path d='M0,0 L0,6 L9,3 z' fill='#000' />
        </marker>
      </defs>
      <line x1='185' y1='5' x2='185' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrowThree)' />
      <line x1='178' y1='160' x2='27' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrowThree)' />
      <line x1='10' y1='20' x2='10' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrowThree)' />
    </svg>

Div2

  <svg width='200' height='118'>
      <defs>
        <marker id='arrowTwo' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
          <path d='M0,0 L0,6 L9,3 z' fill='#000' />
        </marker>
      </defs>
      <line x1='185' y1='5' x2='185' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrowTwo)' /> 
      <line x1='182' y1='110' x2='27' y2='18' stroke='#000' stroke-width='3' marker-end='url(#arrowTwo)' />
      <line x1='10' y1='15' x2='10' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrowTwo)' />
    </svg>

DIV3

 <svg width='200' height='60' id='teste'>
      <defs id='teste1'>
        <marker id='arrowLeftDown' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
          <path d='M0,0 L0,6 L9,3 z' fill='#000' />
        </marker>
      </defs>
      <line x1='10' y1='5' x2='10' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrowLeftDown)' />
    </svg>

列表将始终包含（div1 或 div2）和 div3。

例如：

Div1 Div1 Div3 Div3 Div3 Div3

或者

Div2 Div3 Div3 Div3

问题是 div3 无法识别 ID“arrowLeftDown”，但如果我在 Div1 之后使用“arrowThree”，如果在 Div2 之后使用“arrowTwo”，则它可以工作并添加标记。但是，一旦我的列表是动态的并且我不想创建许多 Div3，每个 Div1 和 Div2 一个，我就不能有这种区别。

【问题讨论】：

你的意思是Div3 Div3 Div3，如果它包含一个id，你不能重复Div3，因为id值在文档中必须是全局唯一的。
因为它是一个列表，所以我在第一项中有 DIV2，在第二项中有 DIV3，在第三项中有 DIV3，等等。正如您在所附图像中看到的那样。但它是一个网络块，根据我作为输入参数发送的 id，我显示 div1、div2 或 div 3
div3 在文档中是否存在多次？
是的，它确实存在于列表的不止一项中。如果你看到图片，每个向下的箭头都是一个 div3
正如我在第一条评论中所说的那样，你不能这样做并让它发挥作用。

标签： html svg marker

【解决方案1】：

我在其他 div 之前添加了一个带有 defs 的 SVG 标记，如下所示：

<svg width='0' height='0'>
      <defs>
        <marker id='arrow' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
          <path d='M0,0 L0,6 L9,3 z' fill='#000' />
        </marker>
      </defs>
</svg>

<div>
    <svg width='200' height='176'>
      <line x1='185' y1='5' x2='185' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
      <line x1='178' y1='160' x2='27' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
      <line x1='10' y1='20' x2='10' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
    </svg>
</div>

<div>
    <svg width='200' height='118'>  
      <line x1='185' y1='5' x2='185' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrow)' /> 
      <line x1='182' y1='110' x2='27' y2='18' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
      <line x1='10' y1='15' x2='10' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
    </svg>
</div>

<div>
    <svg width='200' height='60'> 
      <line x1='10' y1='5' x2='10' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
    </svg>
</div>

【讨论】：