html - 找不到 SVG 标记 ID
问题描述
我有一个网络阻止列表。这个 web 块有每个 div,下面有我根据发送的 Id 显示的代码。
这些是每个 div 的代码:
分区 1
<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>
分区 2
<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。
例如:
分区 1 分区 1 分区 3 分区 3 分区 3 分区 3
或者
分区 2 分区 3 分区 3 分区 3
问题是 div3 无法识别 id“arrowLeftDown”,但如果我在 Div1 之后使用“arrowThree”,如果在 Div2 之后使用“arrowTwo”,则它可以工作并添加标记。但是,一旦我的列表是动态的并且我不想创建许多 Div3,每个 Div1 和 Div2 一个,我就不能有这种区别。
解决方案
我在其他 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>
推荐阅读
- jsf - 我的表格仅在两次单击 commandButton 后更新
- swift - Swift 以编程方式添加本地联系人容器
- c++ - 如何将整数向量转换为 2 位十六进制并按顺序添加到 c 字符串?
- javascript - HTTP 请求承诺和并发
- html - x溢出时,子div的背景不会水平填充父div
- typescript - 单身人士在自己的文件中时的问题
- javascript - 如何通过javascript在HTML表格中追加大数据而不会使浏览器崩溃
- linux - ImportError:/lib64/libc.so.6:在 RHEL 6.9(圣地亚哥)的导入 tensorflow 上找不到版本“GLIBC_2.17”
- mysql - MySQL如果用CASE语句重新评估列然后别名相同的名称,如何引用别名?
- java - 如何在实时数据库firebase中获取第一个子节点