Имитация поворота поворота с помощью преобразования в SVG - PullRequest
Новая
       28

Имитация поворота поворота с помощью преобразования в SVG

2 голосов
/ 13 марта 2010

У меня есть прямоугольник в SVG, который мне нужно повернуть на оси из определенной точки. Лучший способ, который я вижу, это сделать преобразование в ось XY, повернуть градус, а затем снова преобразовать. Проблема в xy второго преобразования. Я предполагаю, что это будет принимать cos и грех в некоторой степени, просто не знаю, где и почему. 

*
|
|
|

будет вращаться на -90 градусов до 

*---

Может быть, я смотрю на это неправильно, кто-нибудь может прояснить?

Ответы [ 4 ]

4 голосов
/ 14 марта 2010

Если вы используете атрибут SVG-преобразования вместо того, чтобы пытаться кодировать его самостоятельно с помощью javascript, все, что вам нужно сделать, это отцентрировать свою фигуру с помощью (0, 0) в качестве оси.

Например, в приведенном ниже примере центр начальной дуги в пути находится в начале координат. Анимация применяется к этому элементу, поэтому он, кажется, вращается на месте с неподвижным кругом. Перевод в содержащей группе перемещает центральную точку вращения в центр изображения. 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <g transform="translate(32, 32)" stroke="navy" fill="none">
        <path d="M -1 1.732 a 2 2 0 1 1 2 0 v 24 a 1 1 0 0 1 -2 0 Z">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="1s" repeatDur="indefinite"/>
        </path>
    </g>
</svg>

Единственный расчет - 1.732, чтобы получить центр круга, матрица преобразования обрабатывает углы. Обратите внимание, что вам не нужно использовать SMIL с SVG , изменение угла с тайм-аута JavaScript также отлично работает.

1 голос
/ 17 мая 2015

Я нашел здесь свой путь к удивлению, как вращать и изображать с помощью JS.

Мне понравилось @gz. ответ. Это было именно то, что я искал.

Я только добавил ,256,256, чтобы указать точку разворота.

От: 

from="0"
to="360" 
dur="1s"

Кому: 

from="0,256,256"
to="360,256,256" 
dur="10s"

<animateTransform attributeName="transform"
  type="rotate"
  from="0,256,256"
  to="360,256,256" 
  dur="10s"
  repeatDur="indefinite"
/>

Фрагмент, нажмите «Выполнить» и посмотрите, как вращается экран радара.

enter image description here

.radar{width:200px;height:200px;}
<svg class="radar"
viewBox="0 0 512 512" 
xmlns="http://www.w3.org/2000/svg">

<path opacity="1" 
  fill="#000" 
  d="M0 0h512v512H0z">
</path>

<path 
transform="scale(1, 1)
translate(0,0)" 
fill="#f00" 
d="M252.78 20.875c-1.302.012-2.6.03-3.905.063-37.928.974-76.148 11.153-111.28 31.437C25.164 117.285-13.41 261.322 51.5 373.75s208.946 151.036 321.375 86.125c77.7-44.86 120.1-127.513 117.47-211.406-3.563 65.847-35.898 128.573-91 169.374-10.828 9.62-22.774 18.315-35.814 25.844-103.68 59.86-235.983 24.4-295.842-79.282-59.86-103.68-24.43-235.984 79.25-295.844 35.64-20.576 74.67-29.88 112.968-29.03 63.304 1.4 124.623 30.57 165.438 82.53l-32.594 23.032c-33.27-42.835-84.01-66.6-136.063-67-.96-.008-1.91-.012-2.875 0-.964.01-1.943.038-2.906.062-28.006.717-56.222 8.215-82.156 23.188-82.99 47.914-111.508 154.322-63.594 237.312 47.914 82.99 154.32 111.51 237.313 63.594 51.37-29.66 81.862-81.724 86.28-136.78-12.53 45.37-42.32 86.745-85.438 114.186-.02.013-.043.018-.062.03l-.344.22c-3.16 2.147-6.42 4.216-9.78 6.156-74.245 42.865-168.918 17.494-211.782-56.75-42.864-74.243-17.493-168.917 56.75-211.78 23.2-13.396 48.39-20.122 73.375-20.782 47.953-1.266 95.138 19.858 125.968 59.156l-39.844 28.156c-20.232-24.32-50.055-37.79-80.594-38.03-1.17-.01-2.33 0-3.5.03-17.035.432-34.176 4.995-49.938 14.094-50.435 29.12-67.806 93.877-38.687 144.313 29.12 50.434 93.908 67.806 144.344 38.686 21.245-12.267 36.623-30.85 45.124-52.03-18.815 21.064-44.364 36.888-73.938 44.155-.04.013-.084.02-.125.033-37.507 10.787-78.796-4.816-99.217-40.188-24.07-41.688-9.845-94.712 31.843-118.78 13.028-7.523 27.143-11.314 41.156-11.69 25.66-.685 50.898 10.098 68.188 30.25l-41 28.97c-5.497-4.796-12.664-7.72-20.53-7.72-17.277 0-31.283 14.007-31.283 31.282 0 17.276 14.004 31.282 31.282 31.282 17.277 0 31.28-14.007 31.28-31.283 0-1.187-.06-2.347-.188-3.5l120.094-57.312 4.03-1.75-.06-.156 62.25-29.72 9.25-4.438-5.282-8.812-19.97-33.375-5.155-8.625-8.25 5.813-8.095 5.718c-45.9-58.864-116.14-91.053-187.844-90.405z">
 
<animateTransform
 attributeName="transform"
 type="rotate"
 from="0,256,256" 
 to="360,256,256" 
 dur="10s" 
 repeatDur="indefinite"
/>
</path>
</svg>
1 голос
/ 13 марта 2010

я думаю, вам нужно только отрицать координаты для первого преобразования:

псевдокод:

g.transform (0,2);
g.rotate (90);
g.transform (0, -2);

0 голосов
/ 13 марта 2010

Раздел SVG Spec о преобразованиях системы координат хорошо показывает матрицы преобразований и способы их объединения.

...