Получение новых точек в Snap.svg после масштабирования и преобразования

#javascript #jquery #css #svg #snap.svg

#javascript #jquery #css #svg #snap.svg

Вопрос:

Я объявил группу SVG следующим образом:

 <g id="group-test">
    <polygon id="polygon-test" fill="#00ff00" points=" 249.60000610351562,90 197.50000762939453,90 171.4000072479248,45 197.4000072479248,0 249.5000057220459,0 275.6000061035156,45 275.5000061020255,45.30000001192093 249.60000610351562,90" />
    <text x="200" y="50" fill="#000000" font-size="14">Xx</text>
</g>
 

Затем я настраиваю выделение группы с помощью Snap, используя родительский svg как sn, а затем анимирую:

 var back = sn.select('#group-test');

setTimeout(function ()
{
    back.animate(
    {
        transform: 's4.06 4.06 t-0.5,34.5'
    },
    1000,
    mina.linear);
},
3000);
 

Но когда я делаю alert($(‘#polygon-test’).attr(‘points’)); Я получаю исходные точки перед масштабированием. Как мне получить новые точки? Firebug также показывает старые.

Ответ №1:

Вы не сможете увидеть преобразованные точки таким образом, поскольку сами точки остаются нетрансформированными в элементе в качестве атрибута.

Вам нужно будет передать точки во что-то, чтобы вернуть преобразованные точки. У Snap есть такая функция..

 Snap.path.map( path, matrix );
 

Вы можете получить матрицу из element.transform().localMatrix

http://snapsvg.io/docs/#Snap.path.map