我在webapp中使用SVG标记,其中包含许多嵌套<g>
,其中大部分都是在其他反应文件中定义的。顶级SVG代码如下所示:
<defs>
<marker id="circleMark" markerWidth="3" markerHeight="3" refx="0" refy="3" orient="auto">
<circle fill="red" cx="0" cy="0" r="2"/>
</marker>
<marker id="arrowMark" markerWidth="3" markerHeight="3" refx="0" refy="3" orient="auto">
<path
d="M 0 0 L 0 6 L 9 150 L 200 50"
stroke="red"
strokeWidth="3"
fill="none"
/>
</marker>
</defs>
{ childPaths }
</svg>
将子定义呈现在别处。我想定义一些line-marker
并在子节点的路径中使用它们,但我不确定如何从另一个文件中引用def
- 我应该在JS中定义这些形状对象呢?如果是这样,我将如何在路径的marker-end
属性中引用它们?