#reactjs #svg #react-spring
Вопрос:
Я использую React-spring для преобразования моих svg-файлов — в данном случае, вместо истинного преобразования, я просто перевожу отдельные части большого и сложного svg-файла по оси y. У меня есть кнопка, которая меняет местами связанные векторы при нажатии, поэтому часть изображения перемещается вверх при первом щелчке и обратно при втором.
Когда я впервые загружаю 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 . Во всяком случае, в реальном окне браузера все выглядит нормально, поэтому я не думаю, что эти ошибки являются законными (в том смысле, что изображение выглядит хорошо, а конечная точка выглядит правильно, анимация происходит и даже может быть repeated…so на что именно он жалуется).
Вопрос в том, действительно ли что-то не так с этими векторами?
Если нет, то я не уверен, как исправить ошибку. Я не уверен, почему d ожидает число, когда он должен ожидать набор инструкций svg. Любые советы будут приветствоваться!
Код spring находится здесь:
const animationProps = useSpring({
castle: castleCoord[curIndex],
//moon: moonsCY[curIndex]
});
Я пытаюсь переместить замок независимо от нескольких элементов в svg.
Ответ №1:
Я получаю точно такую же ошибку, создавая минимальный тег svg и добавляя к нему 2 элемента пути с атрибутами «d», установленными для предоставленных вами векторных строк, поэтому я не думаю, что это что-то конкретное для React-spring. Браузеры чрезвычайно снисходительны к тому, как они анализируют svg xml, поэтому даже при наличии ошибок он часто все равно отображается нормально.
Если я помещу тот же svg через инструмент svg minifier / validator здесь: https://jakearchibald.github.io/svgomg / , а затем вместо этого используйте эту очищенную версию в html, ошибок больше не будет. Но поскольку я не уверен, как оно должно выглядеть, я не могу точно сказать, является ли это решением или нет, но его стоит попробовать.
Комментарии:
1. Хммм. Я поместил сюда векторы с одним путем, заливкой и тегом svg, и то, что появилось на экране, было ошибкой. Если вместо этого я открываю исходные SVG, они выглядят нормально, но при копировании преобразованных данных при первом преобразовании точки на векторе перепутываются необычным образом. Второй раз (разворот) выдает мне ошибку ‘arity’, заставляя меня думать, что вершина, должно быть, где-то была удалена.
2. Я предполагаю, что это как-то связано с тем, как Figma сохраняет SVG. Когда я преобразую SVG, перемещая один элемент вверх, он добавляет дополнительный элемент к вектору (таким образом, ошибка arity), но я недостаточно хорошо разбираюсь в SVG, чтобы понять, почему он добавляет элемент. Удаление элемента для устранения ошибки arity вообще не меняет внешний вид SVG, но может каким-то образом вызывать эти ошибки.
3. Извините, что отвечаю кучу раз — хотя это был не ответ для меня, это довольно удивительный инструмент, и он помог мне понять, что происходит, поэтому проголосуйте и поблагодарите!
4. не парься! да, я постоянно использую этот инструмент SVGOMG. Это бесценно для меня, особенно. для больших и сложных svg.
Ответ №2:
Оказалось, что это что-то о редакторе, который я использовал для создания SVG. После внесения изменений в базовые файлы я смог исправить связанные ошибки arity, и эти ошибки также исчезли. Возможно, это не очень интересный ответ, но если два SVG очень похожи, но все еще выдают эти ошибки, подумайте о том, чтобы вернуться и переделать SVG (в этом случае я буквально скопировал SVG обратно на место, и это изменило разметку).