Абсолютно Позиция Элемент по кругу

Question

У меня есть некоторые HTML со встроенным SVG в нем, как показано ниже

<section id="deck-head"> 

    <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"> 

     <g> 
      <title>Marker</title> 
      <g id="marker-frame"> 
       <path fill="white" d="m133.300003,64.800003l0,-33.500004l-16.100006,0l0,33.299999c-30.799995,3.700005 -53.499996,29.599998 -53.499996,60.800003c0,33.900002 27.600002,61.299995 61.299999,61.299995s61.300003,-27.399994 61.300003,-61.299995c0,-30.900002 -23.600006,-56.599998 -53,-60.599998zm-53.5,60.699997c0,-24.900002 20.299995,-45.199997 45.199997,-45.199997s45.199997,20.299995 45.199997,45.199997s-20.199997,45.300003 -45.199997,45.300003s-45.199997,-20.400009 -45.199997,-45.300003z"/> 
      </g> 
     </g> 

    </svg> 

    <mark>90&deg;</mark> 

</section> 

Мне нужно, чтобы иметь возможность повторить следующую структуру без использования каких-либо внешних библиотек JavaScript

Игнорировать Красный

Я сумел повернуть ю e SVG достаточно просто, чтобы справиться с правильным направлением - однако проблема, с которой я столкнулся, - это заставить элемент полностью позиционировать по тику/кончику розового круга, в зависимости от того, где его повернули.

Логика в моей голове, что я следовал что-то вдоль линий: Получить точку центр круга Получить вращение Узнайте, что левый & верхнее положение будет базироваться вне выше.

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

Answer 1

Это простые полярные координаты. jQuery не нужен, просто для облегчения манипуляций.

var angle = 0, center = 125, radius = 110, pi = Math.PI; 
 
setInterval(function(){ 
 
angle += 1; 
 
$('#c').attr('transform', 'rotate(' + angle + ', 125, 125)'); 
 
// calculate new coordinates for mark 
 
var x = center + radius * Math.cos(angle * pi/180 - pi/2); 
 
var y = center + radius * Math.sin(angle * pi/180 - pi/2); 
 
$('#m').css({top: y + 'px', left: x + 'px'}); 
 
}, 100);

body {background-color:black;} 
 
#m {position:absolute;} 
 
section {poisition:relative;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<section id="deck-head"> 
 

 
    <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"> 
 

 
     <g> 
 
      <title>Marker</title> 
 
      <g id="marker-frame"> 
 
       <path fill="white" id="c" d="m133.300003,64.800003l0,-33.500004l-16.100006,0l0,33.299999c-30.799995,3.700005 -53.499996,29.599998 -53.499996,60.800003c0,33.900002 27.600002,61.299995 61.299999,61.299995s61.300003,-27.399994 61.300003,-61.299995c0,-30.900002 -23.600006,-56.599998 -53,-60.599998zm-53.5,60.699997c0,-24.900002 20.299995,-45.199997 45.199997,-45.199997s45.199997,20.299995 45.199997,45.199997s-20.199997,45.300003 -45.199997,45.300003s-45.199997,-20.400009 -45.199997,-45.300003z"/> 
 
      </g> 
 
     </g> 
 

 
    </svg> 
 

 
    <mark id='m'>90&deg;</mark> 
 

 
</section>