Масштабный путь от центра

У меня есть следующий рисунок SVG:

<svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</svg>

Я хочу программно изменить масштаб этого объекта, но хочу, чтобы он масштабировался из центральной точки.

Я пробовал обернуть его вокруг тега <g>, например

<g transform="translate(0,0)">
<path x="0" y="0" id="control" transform="scale(2)">...</path>
</g>

Но это, похоже, не работает. Я смотрю онлайн, и кажется, что масштабирование пути требует манипуляции с матрицей путей, что кажется ужасно трудным. Раздражающе, его легко масштабировать, используя свойство additive = "sum", но в этом случае я не использую анимацию преобразования.

Может ли кто-нибудь помочь мне?

Изменить: Удалось выполнить эту работу, для тех, кто застрял на одном и том же, вот хороший способ сделать это программно:

var elem = document.getElementById("control");
var bBox = elem.getBBox();
var scaleX = 2;
var scaleY = 2;
$(elem).attr("transform", "scale("+scaleX+", "+scaleY+") translate("+-bBox.width/2+","+-bBox.height/2+") ");

Ответ 1

Если вы знаете координаты центральной точки, вы можете комбинировать трансляцию и масштаб в одном преобразовании. Перевод рассчитывается как: (1 - scale) * currentPosition.

Если центр (10, 20) и вы масштабируетесь на 3, тогда переведите (1 - 3)*10, (1 - 3)*20= (-20, -40):

<g transform="translate(-20, -40) scale(3)">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</g>

Преобразования применяются в обратном порядке от той, которую они объявили, поэтому в приведенном выше примере сначала выполняется scale, а затем translate. Масштабирование влияет на координаты, поэтому перевод выполняется в масштабированных координатах.

Программно можно вычислить центральную точку с помощью element.getBBox().

Ответ 2

Вы можете изменить начало координат на центр:

.scaled-path-svg {
  svg {
    path {
      transform-origin: center;
      transform: scale(1.1);
    }
  }
}

Ответ 3

Ответ, предоставленный aetheria ранее, велик. Есть еще одна вещь, которую нужно позаботиться, а также - ширину штриха, так что контур остается той же ширины, пока объект масштабируется. Использование:

stroke-width: (1/scaling-factor)

Итак, если ваше масштабирование - скажем 2, тогда:

stroke-width: (0.5)

ПРИМЕЧАНИЕ. Вы не должны пропустить transform: translate(...) scale(2), как указано в эфире.