Tenho uma lista de web block. Esse web block contém divs cada uma com o código abaixo, que exibo de acordo com o Id enviado.
Esses são os códigos que tenho em cada 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>"
A lista sempre terá div1 ou div2 mais div3.
Ex:
Div1 Div1 Div3 Div3 Div3 Div3
Ou
Div2 Div3 Div3 Div3
O problema é que a div3 não reconhece o marker "arrowLeftDown", mas se eu colocar "arrowThree" se é após Div1 ou "arrowTwo"se após Div2 ele reconhece e coloca o marker. Mas não posso ter essa distinção pois é dinâmico e não quero criar diversas Div3, uma para cada Div1 e Div2.