Svg defs encapsulation

Question

我正在尝试用一个箭头封装一个带有箭头的SVG行，而React组件中没有任何全局id（但问题本身与React无关）。

示例小提琴https://jsfiddle.net/wzyzqhgh/1/

const LinkComponent = ({ x1, y1, x2, y2, color }) => {
  const coordinates = calculateCoordinates(x1, y1, x2, y2)
  const linkStyle = calculateStyles(x1, y1, x2, y2)
  return (<svg style={linkStyle} shapeRendering="geometricPrecision">
    <defs>
      <marker 
        id="arrow" 
        markerWidth={10} 
        markerHeight={10} 
        refX={9} 
        refY={3} 
        orient="auto" 
        markerUnits="strokeWidth"
      >
        <path d="M0,0 L0,6 L9,3 z" fill={color} />
      </marker>
    </defs>
    <line
      x1={coordinates.x1}
      y1={coordinates.y1}
      x2={coordinates.x2}
      y2={coordinates.y2}
      strokeWidth={1}
      stroke={color}
      markerEnd="url(#arrow)"
    />
  </svg>)
}

此组件在每次呈现时在本地定义marker，但似乎id的{​​{1}}是全局的。所以当我这样做时：

marker

第一种颜色用于两个组件ReactDom.render( (<div> <LinkComponent x1={10} y1={20} x2={100} y2={200} color="red" /> <LinkComponent x1={10} y1={200} x2={200} y2={10} color="blue" /> </div>), document.getElementById('test') ) 。

问题：如何将marker-end封装在单个marker元素中，以便它们不泄漏？还有其他方法可以在svg属性中引用它们而不是marker-*吗？如果不可能，如何在不使用id / defs的情况下实现类似效果

Answer 1

您有几个选择：

1. 将标记定义拉出到所有LinkComponents引用的静态SVG中，或

2. 每次生成一个随机的，唯一的id。

3. 将颜色添加到id中，因此即使您有重复的标记定义，引用哪一个也无关紧要：

   id="arrow-{color}"
   

4. 不要使用标记。自己画箭头。