Программный центрирующий путь svg

Question

Я работаю над скриптом PHP, который генерирует jpg-обои из SVG-файла в соответствии с разрешением экрана посетителя. Обои состоят из кругового градиента (прямоугольника) и дорожки поверх него. Как бы вы шли по горизонтали и вертикали по вертикали к прямоугольнику? Помните, что размер и пропорции прямоугольника не являются постоянными. Должен ли я отделять фон и путь от разных svg-файлов или есть простой способ центрирования путей? Может быть, рамки?

Answer 1

Это достигается путем использования вложенных элементов <svg> и атрибута preserveAspectRatio. Поместите свой фон в внешний svg и ваш путь во внутреннем.

 <?xml version="1.0" encoding="UTF-8"?> 
 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 
 
    
 
     <rect id="background" width="100%" height="100%" fill="grey"/> 
 

 
     <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%"> 
 
      <g> 
 
      <circle cx="15" cy="20" r="10" fill="yellow"/> 
 
      <circle cx="12" cy="17" r="1.5" fill="black"/> 
 
      <circle cx="18" cy="17" r="1.5" fill="black"/> 
 
      <path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/> 
 
      </g> 
 
     </svg> 
 
    
 
     </svg>

Выполнить этот фрагмент и попытайтесь изменить размеры окна.

Чтобы это работало, все, что вам нужно, это убедиться, что атрибут viewBox на внутреннем элементе <svg> правильно установлен.

Answer 2

Если вы знаете координаты путей, вы можете взять общее количество координат x/y и делить на количество координат, это даст вам среднее положение для набора координат. Затем смещайте каждую координату по координатам на половину ширины/высоты квадрата плюс любое смещение, минус разность между центром набора координат и половиной ширины/высоты квадрата.

Это должно привести к тому, что ваши координаты будут центрированы внутри квадрата, я думаю (это довольно рано здесь, и я только что начал свой первый кофе, чтобы я мог ошибаться). Это, конечно, предполагает, что вы знаете все переменные в игре (ширина/высота квадрата, любое применяемое смещение и координаты пути).

Answer 3

Ограничивающая коробка svgElement.getBBox() может помочь.