svg <path /> 上的参考没有“getTotalLength()”方法

Question

我想创建一个渲染 SVG 路径元素的组件，如下所示：

class Path extends Component {
  constructor(props) {
    super(props);

    this.refCallback = this.refCallback.bind(this);
  }

  refCallback(element) {
    console.log("Element: ", element, element.getTotalLength());
  }

  render() {
    const { data, id } = this.props

    return (
      <path d={ data } id={ id } ref={ this.refCallback } />
    );
  }
}

我希望获取路径的 DOM 节点，然后对其使用“getTotalLength()”方法。但我在控制台中得到路径元素的以下输出：

Element: <path d="M11.859375,0.88671875 C9.10229798,32.1448978 3.72401281,62.1847019 0.921875,92.3632812" id="Path"></path>

对于“element.getTotalLength()”：

Uncaught TypeError: element.getTotalLength is not a function

我不知道为什么它会这样。我期望获取 DOM 元素并使用“getTotalLength()”。

有谁知道我做错了什么？

Answer 1

没有 svg 的路径确实支持 getTotalLength() 函数。

有用

<svg>
   <path d={ data } id={ id } ref={ this.refCallback } />
 </svg>