react-spring 错误：<path> 属性 d：预期数字

Question

我正在使用 React-spring 来变形我的 svg——在这种情况下，我只是在 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 指令时会期望一个数字。欢迎任何建议！

spring代码在这里：

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

我正在尝试独立于 svg 中的几个元素移动城堡。

Answer 1

事实证明，这与我用来创建 SVG 的编辑器有关。在对基本文件进行更改后，我能够修复相关的 arity 错误，并且这些错误也消失了。也许不是一个令人兴奋的答案，但如果两个 SVG 非常相似但仍然抛出这些错误，请考虑返回并重新制作 SVG（在这种情况下，我实际上是将 SVG 复制粘贴回原位并更改了标记）。

Answer 2

通过创建一个最小的 svg 标记并向其添加 2 个路径元素，并将“d”属性设置为您提供的向量字符串，我得到了完全相同的错误，所以我认为它没有任何特定于 React-spring .浏览器对它们解析 svg xml 的方式非常宽容，因此即使出现错误，它通常仍然可以正常呈现。

如果我在这里通过 svg minifier/validator 工具输入相同的 svg：https://jakearchibald.github.io/svgomg/，然后在 html 中使用该清理后的版本，则不会再出现错误。但由于我不确定它应该是什么样子，我不能说这是否是一个解决方案，但它值得一试。