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))

Answer 2

尝试这个：-

var trans = $('g.annot').attr('transform');
$('g.annot').attr(trans+' scale(2)');