绝对围绕圆定位元素答案

【问题标题】：Absolutely Position Element Around a Circle绝对围绕圆定位元素
【发布时间】：2014-10-23 04:15:42
【问题描述】：

我有一些带有嵌入式 SVG 的 html，如下所示

<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 库的情况下复制以下布局

忽略红色

我已经设法简单地旋转 SVG 以面对正确的方向 - 但是我遇到的问题是让元素通过粉红色圆圈的刻度/尖端绝对定位，具体取决于它旋转到的位置。

我脑海中的逻辑是这样的：获取圆心点获取旋转根据上述内容找出左侧和顶部的位置。

但是，我完全不知道要计算什么才能获得顶部和左侧坐标才能将标记绝对定位在它应该在的位置。

【问题讨论】：

“但是我遇到的麻烦是通过提示显示标记” - 这是什么意思？
为什么这完全被否决了？
问题不是很清楚
@Brennan 这样更清楚吗？
相关：stackoverflow.com/questions/26599782/…

标签： javascript css geometry trigonometry

【解决方案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>

【讨论】：