jquery - 使用 jQuery 将转换附加到现有转换

Question

我有一个元素

<g class="annot" transform="translate(317,15)">...</g>

我使用的是

$('g.annot')

我想缩放它，例如

$('g.annot').css({'transform': 'scale(2)'})

但这会导致翻译位置被重置。

我如何应用缩放并保留翻译

Answer 1

只需将属性与下一个转换连接:

let g = $('g.annot');
g.attr('transform', `${g.attr('transform')} scale(2)`);

或使用 svg api

let 
  g = $('g.annot').get(0),
  root = g.ownerSVGElement,
  mtr = root.createSVGMatrix(),
  t = g.transform.baseVal
;

mtr.a = 2;
mtr.d = 2;

t.appendItem(root.createSVGTransformFromMatrix(mtr))