我有一个网络阻止列表。该Web块每个div都有一个div,下面的代码根据发送的ID显示。
这些是每个div的代码:
<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>
<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>
<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,就无法再有这种区别了。
答案 0 :(得分:0)
我在其他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>