反應 svg getTotalLength

Question

我想使用 react（ https://css-tricks.com/svg-line-animation-works/ ，但在 ReactJS 中）為 SVG 路徑設置動畫。 為了正確地做到這一點，我需要知道路徑的總長度，在 JS 中你可以只做 path.getTotalLength()，當我的路徑由 JSX 創建時，我怎么能做到這一點？ 謝謝

Answer 1

這是 React 的 refs 派上用場的地方，參見https://facebook.github.io/react/docs/more-about-refs.html

基本上，當您創建 svg 時，您將在路徑上設置一個 ref，然后您可以訪問該 ref（實際上是 dom 中的元素）並調用 getTotalLength()

<svg><path ref="path"> </svg>

然后只要您使用的功能是您的反應組件的一部分，您就可以做到

var path = this.refs.path;
var pathLength = path.getTotalLength()

如果您使用的是 es6，則不推薦使用字符串引用，您實際上會執行類似的操作

    <svg><path ref={(ref) => this.path = ref}> </svg>

無論哪種方式都有效，后者是首選方式，如果您采用后一種方式，則不會調用this.refs.path而只是調用this.path來訪問 dom 節點