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