как повернуть прямоугольник в центральной точке круга - PullRequest
Новая
       21

как повернуть прямоугольник в центральной точке круга

0 голосов
/ 16 марта 2012

Я пытаюсь повернуть прямоугольник вокруг его центральной точки, но я не могу понять, как это работает. Есть простой код в SVG, который делает проблему без функции Cos Sin или сложного кода. Я пытаюсь после некоторого тестирования и, наконец, получаю результаты, но если я хочу изменить размер прямоугольника или переместить его на центральную страницу, все будет беспорядочно, можете ли вы дать мне намерение, как это сделать? Благодарю. jsfiddle.net

мой код: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" height="100" width="100"
         style="stroke:#FF0000; fill: #9C4100">

        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="40s"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            repeatCount="1" 
        />
    </rect>
<circle id="pointA" cx="60" cy="60" r="48" />
</svg>​

1 Ответ

2 голосов
/ 29 марта 2012

Сосредоточьте ваши изображения на оригами и «трансформируйте» их в нужное положение. Я полагаю, вы хотите что-то подобное 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g transform="translate(250,200)">
   <rect x="-50" y="-50" height="100" width="100"
     style="stroke:#FF0000; fill: #9C4100">

    <animateTransform
        attributeName="transform"
        begin="0s"
        dur="20s"
        type="rotate"
        from="0"
        to="360"
        repeatCount="1" 
    />
   <animateTransform attributeName="transform"
    type="scale" from="1" to="2" 
    additive="sum" begin="0" dur="20s" fill="freeze"/>
  </rect>
  <circle id="pointA" cx="0" cy="0" r="48" />
</g>
</svg>
...