0

我试图让我的三角形围绕我的大学作业旋转，但我在让我的三角形响应时遇到了问题。

蓝紫色三角形应该在橙色方框内旋转，大小应该像其他形状一样响应，但我的知识非常有限。

有什么办法可以把我的小三角形压成正方形吗？

我提前感谢您的帮助...

  
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;
    position: absolute;

    animation: rotatingTriangle 5s linear reverse infinite;
}


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

@keyframes rotatingTriangle {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
  
<!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="250,150,280,150,265,175"  class="triangle"/>
                </g>
            </svg>
               
    </body>
</html>

4

1 回答 1

0

正如@enxaneta 建议的那样。您应该给 SVG aviewBox并将所有内容保留在 SVG 中。然后只需使用 CSS 在您的页面上调整 SVG 的大小和位置。

/*Background*/
body {
    background-color: white;
}
/*Grouped Animation*/

svg {
    position: absolute;
    top: 35vh;
    left: 35vw;
    width: 30vw;
    height: 30vw;
    fill:white;
    
}
/*Square in the middle of the BG with thin green stroke*/
.box {
    fill:white;
    stroke:orange;
    stroke-width: 1px;
}
/*Color Changes in both Circle & Triangle*/
.circleAndTriangle {
    animation: colorChange 5s linear infinite;
}

/*Triangle rotating around the circle*/
.triangle {    
    transform-origin: 50px 50px;
    animation: rotatingTriangle 5s linear reverse infinite;
}


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

@keyframes rotatingTriangle {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
<svg viewBox="0 0 100 100">
    <rect x="1" y="1" width="98" height="98" class="box"/>
    <g class="circleAndTriangle">
        <circle cx= "50" cy="50" r="5" class="circle"/> 
        <polygon points="45,93, 55,93, 50,98" class="triangle"/>
    </g>
</svg>

于 2021-12-01T06:45:04.837 回答