參考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（）”方法。 但是我在控制台中獲取了path元素的以下輸出：

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>

Answer 2

您缺少svg標記，您可以先分配組件的ref，然后使用DOM方法。

你可以嘗試這樣的事情

class App extends Component {
  componentDidMount() {
    console.log(this.pathref.getTotalLength());
  }
  render() {
    const { data, id } = this.props
    return(
      <svg>
        <path ref={(ref) => { this.pathref = ref; }} d={ data } id={ id }></path>
      </svg>
    )
  }
}