在ReactJS内部的SVG中使用<defs>和行标记

时间:2016-07-05 20:09:25

标签: javascript svg reactjs

我在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属性中引用它们?

0 个答案:

没有答案