react-spring Error: <path> attribute d: Expected number-CodePudding

I am using React-spring to morph my svgs - in this case, rather than a true morph, I'm really just translating particular parts of a large and complex svg on the y axis. I have a button that swaps the related vectors when clicked, so part of the image moves up on the first click, and back on the second.

When I first load the svg, I don't have any errors. I start to get errors after the first click, and the errors are related to this set of vectors:

    "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:

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

After the second click, the errors explode in number, but appear to be for vectors I can't find in my svg (this is when the image returns to it's original position). I'm not sure where the numbers are coming from, which makes me think maybe they are generated by Spring. At any rate, everything looks fine in the actual browser window, so I don't think these errors are legit (in the sense that the image looks good, and the terminal point looks right, the animation happens, and even can be repeated...so what exactly is it complaining about).

The question is: Is there actually something wrong with these vectors?

If not, I'm not sure how to fix the error. I'm not sure why d would expect a number when it should expect a set of svg instructions. Any advice would be welcome!

The spring code is here:

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

I am trying to move the castle independent of several elements in the svg.

CodePudding user response：

I get the exact same error by creating a bare minimum svg tag and adding 2 path elements to it with the "d" attributes set to the vector strings you provided, so I don't think its anything specific to React-spring. Browsers are extremely forgiving with how they parse svg xml so even when there are errors it often still renders fine.

If I put that same svg through the svg minifier/validator tool here: https://jakearchibald.github.io/svgomg/ , and then use that cleaned version in the html instead, there are no more errors. But since i'm not sure what its supposed to look like I can't really say if that's a solution or not, but its worth trying.

CodePudding user response：

It turned out to be something about the editor I had used to create the SVGs. After making changes to the base files, I was able to fix related arity errors, and these errors also went away. Maybe not an exciting answer, but if the two SVGs are very similar but still throwing these errors, consider going back and remaking the SVGs (in this case, I literally copy-pasted the SVG back in place and it changed the markup).