如何让SVG中的旋转多边形元素实现响应式适配

问题核心原因 #

• 三角形的polygon点位用了固定像素值，没有使用响应式单位，所以不会随窗口尺寸变化缩放
• 三角形的固定点位和圆形的中心位置没有对齐，导致旋转时位置偏移

修复方案 #

1. 修改HTML中三角形的点位

把polygon的points属性换成和圆形中心对齐的vw单位值，保证尺寸和圆形、橙色框同步响应式变化：

<polygon points="50vw,32.8vw 51.5vw,35vw 48.5vw,35vw"  class="triangle"/>

这个点位设置的三角形和你原有尺寸比例一致，尖部朝上，底部刚好对齐圆形中心，缩放时不会变形。

2. 优化CSS的三角形样式

去掉冗余的position: absolute属性，保留正确的旋转原点即可：

.triangle {    
    transform-origin: 50vw 35vw;
    animation: rotatingTriangle 5s linear reverse infinite;
}

如果需要调整三角形的大小，直接修改points里的vw数值即可，所有元素都会同步响应式缩放，始终在橙色方框内旋转。

完整可运行代码 #

CSS部分

body {
    background-color: white;
}
  
svg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    fill:white;
}

.box {
    position: relative;
    width: 30vw;
    height: 30vw;
    fill:white;
    stroke:orange;
    stroke-width: 1px;
}

.circleAndTriangle {
    animation: colorChange 5s linear infinite;
}

.triangle {    
    transform-origin: 50vw 35vw;
    animation: rotatingTriangle 5s linear reverse infinite;
}

@keyframes colorChange {
    0% {fill:blue }
    100% {fill:red}
} 

@keyframes rotatingTriangle {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

HTML部分

<!DOCTYPE html>
<html lang="en-UK">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link type="text/css" href="https://cdn.jsdelivr.net/npm/reset-css@3.0.0/reset.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <title>Rotating Study</title>
    </head>

    <body> 
            <svg>
                <rect x="35vw" y="20vw" rx="0px" ry="0px" class="box"/>
                <g class="circleAndTriangle">
                    <circle cx= "50vw" cy="35vw" r="1.5vw" class="circle"/> 
                    <polygon points="50vw,32.8vw 51.5vw,35vw 48.5vw,35vw"  class="triangle"/>
                </g>
            </svg>
               
    </body>
</html>

内容的提问来源于stack exchange，提问作者April K