Css 使用组元素旋转SVG圆

我想旋转一个SVG圆，同时防止其他元素旋转

当我尝试使用rotateZ（15度）旋转圆（白色）时，我得到了以下结果：

这是我目前的进展：

2007
洛勒姆
乱数假文

我想实现

• 圆形（白色）在单击白色上的点时旋转
  圈

---

我将计算圆点在圆上的位置，并使用圆点的坐标绘制直线和文本，而不是旋转所有内容
为此，我使用javascript。脚本中最重要的部分是用于计算旋转点的新位置的函数：

rotatePoint（p、c、rot）

请注意，在svg中，我消除了无用的转换

让g=document.querySelector（“theG”）；
//圆心
设中心={x:700，y:-40}；
//以弧度为单位的thr旋转
让腐烂=0.6；
//用于计算旋转点的新位置的函数
函数旋转点（p、c、rot）{
//p:重点是什么
//c:旋转中心
//旋转：旋转
设cos=Math.cos（rot）；
让罪恶=数学。罪恶（腐朽）；
返回{
x:c.x+（p.x-c.x）*cos-（p.y-c.y）*sin，
y:c.y+（p.x-c.x）*sin+（p.y-c.y）*cos
};
}
//具有一类点的所有群
设groups=g.queryselectoral（“.dot”）；
设点=[]；
组。forEach（（g）=>{
设点=g.查询选择器（“圆”）；
设p={}；
p、 x=点.getAttribute（“cx”）；
p、 y=点.getAttribute（“cy”）；
点推（p）
});
itr.addEventListener（“输入”，（）=>{
设rot=itr.value；
组。forEach（（g，i）=>{
设点=g.查询选择器（“圆”）；
设line=g.querySelector（“line”）；
设t1=g.queryselectoral（“文本”）[0]；
设newPoint=rotatePoint（点[i]，中心，旋转）；
setAttribute（“cx”，newPoint.x）；
点集属性（“cy”，newPoint.y）；
line.setAttribute（“x1”，newPoint.x）；
line.setAttribute（“x2”，newPoint.x）；
line.setAttribute（“y1”，newPoint.y）；
line.setAttribute（“y2”，newPoint.y+180）；
t1.setAttribute（“x”，newPoint.x）；
t1.setAttribute（“y”，newPoint.y+200）；
});
});
输入{宽度：90vw；}
p{文本对齐：居中；}
文本{文本定位点：中间}
行{笔划：#000；笔划宽度：1px；}

2007
2006
2008
我想知道它是否可以在没有javascript的情况下完成。在下一个演示中，我使用javascript只是为了更改旋转值

因为我使用的是svg变换，所以角度是degs而不是弧度

主要思想是：我正在创建一个嵌套的svg元素。当我在一个方向上旋转G时，我需要在相反的方向上旋转线和文本相同的度数。问题是，当旋转G时，点改变了位置，我需要知道这个位置，才能将它用作线条和文本的中心

解决方案是将所有内容放在嵌套的svg中，所有内容都保持在相同的位置，并旋转嵌套的svg。当它出来的时候。因此，我将每个嵌套的svg放在一个组中，并旋转该组


itr.addEventListener（“输入”，（）=>{
设rot=itr.value；
setAttribute（“transform”，`rotate（${rot}700-40）`）
setAttribute（“transform”，`rotate（${-rot}302 480）`）；
setAttribute（“transform”，`rotate（${-rot}700 600）`）；
setAttribute（“transform”，`rotate（${-rot}1100 480）`）；
});
输入{宽度：90vw；}
p{文本对齐：居中；}
文本{文本定位：中间；字体系列：'Playfair Display'衬线；字体大小：2em；字体重量：粗体；填充：#9d9e9f；}
行{笔划：#000；笔划宽度：1px；}

2007
2006
2008
回答得很好！对我来说有趣又有用
<svg viewBox="0 0 1400 900" style="outline:1px solid red;">
            <g>
               <clipPath id="hexagonal-mask">
                  <circle cx="700" cy="100" r="705" ></circle>
               </clipPath>
            </g> 
            <a>
             <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="{{ asset('images/H3z50J2.jpg') }}"  style="transform: translateY(-140px);"/>
            </a>

            <g  style="transform-origin: 701px -5%; transform: rotateZ(15deg)">
                <circle cx="701" cy="0" r="665" stroke="#fff" stroke-width="1px" fill="transparent"  style="transform: translateY(-50px);" ></circle>
               
                <!-- center dot -->
                <g id="g1" >
                    <circle cx="701" cy="615" r="15" fill="#fff">
                        
                    </circle> 
                    <path  stroke="#000" stroke-width="1px" d="M701 630 701 690"></path>
                   
                    <text x="672" y="720" font-family="'Playfair Display', serif" font-size="2em" font-weight="bold" fill="#9d9e9f">2007</text>
                    <text x="640" y="730" font-family="'Playfair Display', serif" font-size="2.85em" font-weight="bold" fill="#000">
                        <tspan x="640" dy="40">Lorem</tspan>
                        <tspan x="640" dy="45">Ipsum</tspan>
                    </text>
                    
                    <animateMotion 
                       xlink:href="#g1"
                       dur="1s"
                       begin="click"
                       fill="freeze"
                       path="M0 100 Q50 80 -399 -135"
                       repeatCount="1">
                        
                    </animateMotion>
                </g>
                
                
                

                <!-- left dot -->
                <g>
                    <!-- <circle cx="305" cy="485" r="15" fill="#fff"></circle> -->
                    <circle cx="302" cy="480" r="15" fill="#fff"></circle>
                    <path stroke="#000" stroke-width="1px" d="M302 495 305 675"></path>
                </g>

                <!-- right dot -->
                <g>
                    <circle cx="1100" cy="480" r="15" fill="#fff"></circle>
                    <path  stroke="#000" stroke-width="1px" d="M1100 495 1100 675"></path>
                </g>
            </g>

        </svg>