react-spring錯誤：<path>屬性d：預期數量

我正在使用 React-spring 來變形我的 svgs - 在這種情況下，而不是真正的變形，我實際上只是在 y 軸上轉換大型復雜 svg 的特定部分。我有一個按鈕，可以在單擊時交換相關向量，因此在第一次單擊時影像的一部分向上移動，然后在第二次單擊時回傳。

當我第一次加載 svg 時，我沒有任何錯誤。我第一次點擊后就開始報錯，報錯和這組向量有關：

    "M0 834.5L31.6776   810.203L22.1257 798.768L36.2022 791.807H53.2951L79.9399 755.511V747.059L89.9945 740.098H107.087L121.164 713.249L136.749 700.819L158.366 690.875V679.44L179.481 668.501L195.066 637.178L208.137 619.279V586.961V570.056V559.118L195.066 546.688L179.481 516.359L219.197 519.839H244.836V475.588H266.956H297.623L306.169 391.562H323.262V342.339V338.859H324.268V342.339H327.284V339.853L329.295 338.859L331.306 339.853V342.339H334.825V339.853L336.836 338.859L338.847 339.853V342.339H342.869V339.853L344.88 338.859L346.891 339.853V342.339H349.907L357.448 278.2L349.907   260.798V248.866L372.53 236.933L392.639 248.866V260.798L386.607 278.2L392.639   309.027H396.158V306.541L398.169 305.546L400.18 306.541V309.027H404.202V306.541L406.213 305.546L408.224 306.541V309.027H412.246V306.541L414.257 305.546L416.268 306.541V309.027H420.29V306.541L422.301 305.546L424.311 306.541V309.027H428.333V306.541L430.344 305.546L432.355 306.541V309.027H436.377V306.541L438.388 305.546L440.399 306.541V309.027H444.421V306.541L446.432 305.546L448.443 306.541V309.027H452.464V306.541L454.475 305.546L456.486 306.541V309.027H460.508V306.541L462.519 305.546L464.53 306.541V309.027H468.552V306.541L470.563 305.546L472.574 306.541V309.027H476.596V306.541L478.607 305.546L480.617 306.541V309.027H484.137L489.667 278.2L480.617   260.798V248.866L497.71 236.933L518.322 248.866V260.798L512.29 278.2L528.88   342.339H530.388V339.853L532.399 338.859L534.41 339.853V342.339H538.432V339.853L540.443 338.859L542.454 339.853V342.339H547.481L558.541 278.2L547.481   260.798V248.866L569.098 236.933L589.208 248.866V260.798L578.148 278.2L589.208   343.831H591.721V341.345L593.732 340.35L595.743 341.345V343.831H599.765V341.345L601.776 340.35L603.787 341.345V343.831H607.809V340.35H608.814V343.831V384.104L634.956 439.79H636.464V437.304L638.475 436.31L640.486 437.304V439.79H644.508V437.304L646.519 436.31L648.53 437.304V439.79H652.552V437.304L654.563 436.31L656.574 437.304V439.79H660.791V437.304L662.607 436.31L664.617 437.304V439.79H668.639V437.304L670.65 436.31L672.661 437.304V439.79H676.683V437.304L678.694 436.31L680.705 437.304V439.79H684.727V436.31H685.732V439.79V494.233H723.437V559.118L1103 548.676V923H0V834.5Z",
    "M0 609.069L32.6776 585.203L23.1257 573.768L37.2022 566.807H54.2951L80.9399 530.511V522.059L90.9945 515.098H108.087L122.164 488.249L137.749 475.819L159.366 465.875V454.44L180.481 443.501L196.066 412.178L209.137 394.279V361.961V345.056V334.118L196.066 321.688L180.481 291.359L220.197 294.839H245.836V250.588H267.956H298.623L307.169 166.562H324.262V117.339V113.859H325.268V117.339H328.284V114.853L330.295 113.859L332.306 114.853V117.339H335.825V114.853L337.836 113.859L339.847 114.853V117.339H343.869V114.853L345.88 113.859L347.891 114.853V117.339H350.907L358.448 53.2003L350.907 35.7983V23.8655L373.53 11.9328L393.639 23.8655V35.7983L387.607 53.2003L393.639 84.0266H397.158V81.5406L399.169 80.5462L401.18 81.5406V84.0266H405.202V81.5406L407.213 80.5462L409.224 81.5406V84.0266H413.246V81.5406L415.257 80.5462L417.268 81.5406V84.0266H421.29V81.5406L423.301 80.5462L425.311 81.5406V84.0266H429.333V81.5406L431.344 80.5462L433.355 81.5406V84.0266H437.377V81.5406L439.388 80.5462L441.399 81.5406V84.0266H445.421V81.5406L447.432 80.5462L449.443 81.5406V84.0266H453.464V81.5406L455.475 80.5462L457.486 81.5406V84.0266H461.508V81.5406L463.519 80.5462L465.53 81.5406V84.0266H469.552V81.5406L471.563 80.5462L473.574 81.5406V84.0266H477.596V81.5406L479.607 80.5462L481.617 81.5406V84.0266H485.137L490.667 53.2003L481.617 35.7983V23.8655L498.71 11.9328L519.322 23.8655V35.7983L513.29 53.2003L529.88 117.339H531.388V114.853L533.399 113.859L535.41 114.853V117.339H539.432V114.853L541.443 113.859L543.454 114.853V117.339H548.481L559.541 53.2003L548.481 35.7983V23.8655L570.098 11.9328L590.208 23.8655V35.7983L579.148 53.2003L590.208 118.831H592.721V116.345L594.732 115.35L596.743 116.345V118.831H600.765V116.345L602.776 115.35L604.787 116.345V118.831H608.809V115.35H609.814V118.831V159.104L635.956 214.79H637.464V212.304L639.475 211.31L641.486 212.304V214.79H645.508V212.304L647.519 211.31L649.53 212.304V214.79H653.552V212.304L655.563 211.31L657.574 212.304V214.79H661.791V212.304L663.607 211.31L665.617 212.304V214.79H669.639V212.304L671.65 211.31L673.661 212.304V214.79H677.683V212.304L679.694 211.31L681.705 212.304V214.79H685.727V211.31H686.732V214.79V269.233H724.437V334.118L1104 323.676V698H1L0.5Z"

錯誤：

Error: <path> attribute d: Expected number, "…323.676V698H1L0.5Z".

第二次點擊后，錯誤數量激增，但似乎是我在 svg 中找不到的向量（這是影像回傳到原始位置的時間）。我不確定這些數字來自哪里，這讓我覺得它們可能是由 Spring 生成的。無論如何，在實際的瀏覽器視窗中，一切看起來都很好，所以我認為這些錯誤是不合法的（從某種意義上說，影像看起來不錯，終端點看起來不錯，影片發生了，甚至可以重復。 ..所以它到底在抱怨什么）。

問題是：這些向量實際上有什么問題嗎？

如果沒有，我不確定如何修復錯誤。我不知道為什么 d 在應該期望一組 svg 指令時會期望一個數字。任何的建議都受歡迎！

彈簧代碼在這里：

 const animationProps = useSpring({
    castle: castleCoord[curIndex],
    //moon: moonsCY[curIndex]
  });

我試圖獨立于 svg 中的幾個元素移動城堡。

uj5u.com熱心網友回復：

通過創建一個最小的 svg 標簽并向其中添加 2 個路徑元素，并將“d”屬性設定為您提供的向量字串，我得到了完全相同的錯誤，所以我認為它不是 React-spring 特有的。瀏覽器對它們決議 svg xml 的方式非常寬容，因此即使出現錯誤，它通常仍然可以正常呈現。

如果我通過此處的 svg minifier/validator 工具放置相同的 svg：https ://jakearchibald.github.io/svgomg/ ，然后在 html 中使用該清理過的版本，則不會再有錯誤。但是因為我不確定它應該是什么樣子，所以我真的不能說這是否是一個解決方案，但值得一試。

uj5u.com熱心網友回復：

原來是我用來創建 SVG 的編輯器的一些東西。在對基本檔案進行更改后，我能夠修復相關的 arity 錯誤，并且這些錯誤也消失了。也許不是一個令人興奮的答案，但如果兩個 SVG 非常相似但仍然拋出這些錯誤，請考慮回傳并重新制作 SVG（在這種情況下，我實際上是將 SVG 復制粘貼回原位并更改了標記）。

標籤：反应 svg 反应弹簧

上一篇：資料庫插入資料，實時渲染到前端

下一篇：在CSS中顯示SVG的問題::before