SVG Path 0 - 1 Преобразование диапазона в Javascript

Я нашел этот полезный PHP-скрипт, чтобы сделать мои пути SVG относительно контейнера, следовательно, отзывчивыми при реализации во внешнем интерфейсе.

$absolute_path = "M0,67.9586133 M0,67.9586133.....Z";
function regex_callback($matches) {
    static $count = -1;
    $count++;
    $width = 1072.01;
    $height = 399.23;
    if($count % 2) {
        return $matches[0] / $height;
    } else {
        return $matches[0] / $width;
    }
}

$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path);

Источник: Преобразование данных пути SVG в диапазон 0-1

Поскольку в настоящее время я работаю с JavaScript и Node, я пытаюсь воссоздать эту функцию с помощью JavaScript. Вот что я получил до сих пор, но я застрял, поскольку возвращаемые данные точно такие же, как и вводимые.

function replacer(match, svgWidth, svgHeight) {
  let count = -1;
  count++;
  if (count % 2) {
    return match[0] / svgHeight;
  } else {
    return match[0] / svgWidth;
  }
}

let svgPath = "M0,67.9586133 M0,67.9586133.....Z"
let nuPath = svgPath.replace('(\d+(\.\d+)?)', replacer);
console.log(nuPath);

Любая помощь - направление и/или исправление приветствуется.

Спасибо!


person mmarquez    schedule 14.07.2017    source источник
comment
Почему бы вам просто не использовать элемент <g>, чтобы он оставался отзывчивым?   -  person lilezek    schedule 14.07.2017
comment
Я использую свой SVG в качестве clipPath с clipPathUnits="objectBoundingBox", и, насколько я понимаю, для того, чтобы это было отзывчивым, единицы должны быть 0–1. Дайте мне знать, если я ошибаюсь!   -  person mmarquez    schedule 14.07.2017
comment
Какой SVG требует столько значащих цифр в своих координатах? XD Во всяком случае, в некоторых случаях вы можете просто установить атрибут viewBox, вы пробовали это?   -  person Niet the Dark Absol    schedule 14.07.2017
comment
В PHP-коде $height и $width жестко запрограммированы со значениями 1072.01 и 399.23 соответственно. Код JavaScript пытается получить значения svgHeight и svgWidth из самой строки, поэтому их значения будут (если они написаны правильно) "67.9586133" и "67.9586133". Вы не можете поместить в функцию разные значения и ожидать одного и того же результата.   -  person Jordan Running    schedule 14.07.2017
comment
Спасибо @JordanRunning - на самом деле я передаю те же значения, что и svgHeight и svgWidth в своей JS-функции - избегал включения ненужного кода в вопрос, но я понимаю, что это было неясно!   -  person mmarquez    schedule 14.07.2017


Ответы (1)


Используйте регулярное выражение с глобальный флаг:

let nuPath = svgPath.replace(/(\d+(\.\d+)?)/g, replacer);

Кроме того, вы должны определить ширину и высоту вне функции:

let svgHeight = 399.23;
let svgWidth = 1072.01;

И, наконец, вы должны стереть неиспользуемые аргументы функции:

let count = -1;
function replacer(match) {
  count++;
  if (count % 2) {
    return match / svgHeight;
  } else {
    return match / svgWidth;
  }
}
person lilezek    schedule 14.07.2017
comment
Спасибо за ответ - очень ясно, но вывод отличается от того, что мне дают исходные сценарии PHP. Например: если передать "M0,67.9586133 L53.72258,297.209905... в качестве пути, PHP выведет: "M0,0.170224214864 L0.0501138795347..., а JS выведет: "M0,0.005596962714900048 L0.004664135595750039... Это похоже на человеческую ошибку, но я перепроверил и не могу найти причину. - person mmarquez; 14.07.2017
comment
Я вытащил переменную count из функции. Кстати, этот код, преобразованный напрямую из PHP, грязный. - person lilezek; 14.07.2017
comment
Спасибо чувак ! Действительно ценю помощь - все еще есть та же проблема с выводом, который не является правильным, но я вижу прогресс на данный момент, потому что, по крайней мере, я получаю другой вывод от исходного ввода. - person mmarquez; 14.07.2017
comment
Что сейчас выдает? - person lilezek; 14.07.2017
comment
Кажется, что удаление массива [index] совпадения вернет правильный результат? Вместо: ` return match[0] / svgWidth ` я просто: return match / svgWidth и значения вроде бы работают! Все еще не на 100% уверен, почему, но, похоже, решает проблему :) - person mmarquez; 14.07.2017
comment
Теперь это исправлено. В матче не должно быть [0]. - person lilezek; 14.07.2017
comment
Спасибо за помощь!! - person mmarquez; 14.07.2017