svg中怎么让一个图形按我指定的圆心旋转？

Posted 2023-04-08

<g id="g1" transform ="scale(1.0)">
<text x="160" y="200" font-size="30" fill="white">z0001</text>
<polygon id="z0001" fill="white" points="100,100 300,100 300,300 100,300" stroke="blue" stroke-width="4" onclick ="colorfill()" >
<animate attributeName="opacity" from="1" to="0"
begin="mouseover" dur="1s" end="mouseout" repeatCount="indefinite" fill="restore" />
</polygon>
<text x="360" y="200" font-size="30" fill="white">z0002</text>
<polygon id="z0002" fill="white" points="300,100 500,100 500,300 300,300" stroke="blue" stroke-width="4" onclick ="colorfill()">
<animate attributeName="opacity" from="1" to="0"
begin="mouseover" dur="1s" end="mouseout" repeatCount="indefinite" fill="restore" />
</polygon>
<text x="160" y="400" font-size="30" fill="white">z0003</text>
<polygon id="z0003" fill="white" points="100,300 300,300 300,500 100,500" stroke="blue" stroke-width="4" onclick ="colorfill()">
<animate attributeName="opacity" from="1" to="0"
begin="mouseover" dur="1s" end="mouseout" repeatCount="indefinite" fill="restore" />
</polygon>
<text x="360" y="400" font-size="30" fill="white">z0004</text>
<polygon id="z0004" fill="white" points="300,300 500,300 500,500 300,500" stroke="blue" stroke-width="4" onclick ="colorfill()">
<animate attributeName="opacity" from="1" to="0"
begin="mouseover" dur="1s" end="mouseout" repeatCount="indefinite" fill="restore" />
</polygon>

<a xlink:href="Default.aspx">
<circle cx="300" cy="300" r="80" fill="rgb(100,55,120)" stroke="blue">
<animate attributeName="fill" from="rgb(100,55,120)" to="white"
begin="mouseover" end="mouseout" dur="2s" fill="restore" repeatCount="indefinite"/>
</circle>
</a>
/*就是这里怎么指定圆心旋转，现在下面代码的旋转是以0，0转的，不知道转哪去了......
<animateTransform attributeName="transform" type="rotate"
from="0" to="360" begin="mouseover" end="mouseout" dur="3s" repeatCount="indefinite"/>

</g>
没高手能指点吗？

因为圆绕圆心旋转任意角度后都能与原图形重合，所以将一个圆绕圆心旋转180度后的图形与原图形重合说法正确．
故答案为：正确． 参考技术A <animateTransform attributeName="transform" type="rotate"
from="0,x,y" to="360,x,y" begin="mouseover" end="mouseout" dur="3s" repeatCount="indefinite"/>
xy 就是你的圆心坐标。 参考技术B http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/01declarativeSquare.svg
这个例子最简单明了！ 参考技术C 我也正在研究。用到这个地方了。 参考技术D 你还是去校友网查查有没有知道这方面的人吧~
也许会遇见高人~或者打电话咨询一下~
去学校问问老师也不错~

制作一个小黄鸭转圈跳舞的页面。

我们来制作一个小黄鸭转圈跳舞的页面。

分析一下

1、分析一下这个页面，要完成这些效果，一共需要3步：

• 把鸭子都放到一个盒子当中
• 在盒子里，把每个鸭子的位置摆好
• 让盒子旋转

2、让鸭子在盒子中的位置摆好，需要怎么做：

• 先让鸭子站在圆心的位置（需要先了解父相子绝定位方式）
• 沿一个方向移动一个半径的距离（3d）
• 每个鸭子旋转一个角度，让鸭子均匀的分布一圈

开始写代码

要用到的知识包括几个HTML标签和一部分的css知识。

先把图片放到页面里边。

先来在页面中添加一个img标签，将小黄鸭跳舞的gif图放到标签中

<img src="img/001.gif" >

这个时候，可以看到，页面中已经有一个小黄鸭了。

把图片放到一个盒子里边

<div class="box">
    <img src="img/001.gif" >
</div>

这个时候盒子看不到，我们通过选择器，来给盒子添加一个边框，好看到它

<style>
    .box{
        border: 1px solid red;
    }
</style>

盒子很大，比鸭子大很多。

我们把盒子的大小设置成跟鸭子图片的大小一样

.box{
    border: 1px solid red;
    width: 140px;
    height: 172px;
}

接下来呢，让小黄鸭显示在页面的中间。

.box{
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
}

这个时候，盒子跟盒子里的鸭子都居中了。

我们再添加其他的鸭子。

<div class="box">
    <img src="img/001.gif">
    <img src="img/002.gif">
    <img src="img/003.gif">
    <img src="img/004.gif">
    <img src="img/005.gif">
    <img src="img/006.gif">
    <img src="img/007.gif">
    <img src="img/008.gif">
    <img src="img/009.gif">
</div>

发现鸭子是竖着排成一列的

我们先要把所有的鸭子放到围绕旋转的圆心处，所以，所有的鸭子应该是在同一个位置。怎么把鸭子都放在圆心处呢。我们需要先学习一个定位方式：父相子绝定位。

重要内容补充-定位方式的讲解

相对定位，绝对定位。

重要内容补充-3D图形布局讲解

需要进行3D布局的元素，父元素加上一个样式：

transform-style: preserve-3d;

只加上这个，没有效果，需要跟transform配合使用

transform-style: preserve-3d;

/*设置旋转绕X轴*/ 
transform: rotateX(-10deg);   

开始写代码

把所有鸭子放到同一个位置

利用父相子绝定位，把父盒子设置成相对定位，子盒子设置成绝对定位

.box{
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
    position: relative;
}

img{
    position: absolute;
}

让鸭子面向不同的方向，在360度内均匀分布

设置父盒子的3D效果，给每个图片添加一个类名，给每个图片，设置不同的旋转角度。

<div class="box">
    <img src="img/001.gif" class="img1">
    <img src="img/002.gif" class="img2">
    <img src="img/003.gif" class="img3">
    <img src="img/004.gif" class="img4">
    <img src="img/005.gif" class="img5">
    <img src="img/006.gif" class="img6">
    <img src="img/007.gif" class="img7">
    <img src="img/008.gif" class="img8">
    <img src="img/009.gif" class="img9">
</div>

<style>
    .box {
        border: 1px solid red;
        width: 140px;
        height: 172px;
        /*margin-right: auto ;*/
        /*margin-left: auto ;*/
        margin: 0 auto;
        position: relative;

        transform-style: preserve-3d;
    }

    img {
        position: absolute;
    }

    .img1 {
        transform: rotateY(0deg);
    }

    .img2 {
        transform: rotateY(40deg);
    }

    .img3 {
        transform: rotateY(80deg);
    }

    .img4 {
        transform: rotateY(120deg);
    }

    .img5 {
        transform: rotateY(160deg);
    }

    .img6 {
        transform: rotateY(200deg);
    }

    .img7 {
        transform: rotateY(240deg);
    }

    .img8 {
        transform: rotateY(280deg);
    }

    .img9 {
        transform: rotateY(320deg);
    }
</style>

这个时候，鸭子都在圆点，面向了不同的角度，在让它们向前跨一步，就分散成了一个圆

<style>
    .box {
        border: 1px solid red;
        width: 140px;
        height: 172px;
        /*margin-right: auto ;*/
        /*margin-left: auto ;*/
        margin: 0 auto;
        position: relative;

        transform-style: preserve-3d;
    }

    img {
        position: absolute;
    }

    .img1 {
        transform: rotateY(0deg) translateZ(300px);
    }

    .img2 {
        transform: rotateY(40deg) translateZ(300px);
    }

    .img3 {
        transform: rotateY(80deg) translateZ(300px);
    }

    .img4 {
        transform: rotateY(120deg) translateZ(300px);
    }

    .img5 {
        transform: rotateY(160deg) translateZ(300px);
    }

    .img6 {
        transform: rotateY(200deg) translateZ(300px);
    }

    .img7 {
        transform: rotateY(240deg) translateZ(300px);
    }

    .img8 {
        transform: rotateY(280deg) translateZ(300px);
    }

    .img9 {
        transform: rotateY(320deg) translateZ(300px);
    }
</style>

但其实没有看到围城圆的效果，我们把父盒子在x轴旋转一个角度，就可以体现出来。同时，加一个

margin-top: 150px;

.box {
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
    position: relative;

    transform-style: preserve-3d;
    transform: rotateX(-20deg);
    margin-top: 150px;
}

可以看到，已经形成一个圆了。

添加动画

/*定义一个动画*/
@keyframes xuanzhuan {
    0% {
        transform: rotateX(-20deg) rotateY(0deg)
    }
    100% {
        transform: rotateX(-20deg) rotateY(360deg)
    }
}

.box {
    border: 1px solid red;
    width: 140px;
    height: 172px;
    /*margin-right: auto ;*/
    /*margin-left: auto ;*/
    margin: 0 auto;
    position: relative;

    transform-style: preserve-3d;
    transform: rotateX(-20deg);

    margin-top: 150px;

    /*绑定动画*/
    animation: xuanzhuan 10s;
    /*动画无限循环播放*/
    animation-iteration-count: infinite;
    /*速度线性播放*/
    animation-timing-function: linear;
}

添加背景音乐

<audio src="media/小黄鸭音频.mp3" autoplay="autoplay" loop="loop"></audio>

chrome浏览器不能自动播放问题解决

浏览器输入

chrome://flags/#autoplay-policy

将 Autoplay policy 改为

No user gesture is required

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        @keyframes xuanzhuan {
            0% {
                transform: rotateX(-20deg) rotateY(0deg)
            }
            100% {
                transform: rotateX(-20deg) rotateY(360deg)
            }
        }

        body {
            background-color: #313131;
        }

        .box {
            width: 154px;
            height: 186px;
            margin: 150px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-20deg);

            animation: xuanzhuan 15s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        .box > div {
            position: absolute;
        }
    </style>

</head>
<body>

<audio src="media/小黄鸭音频.mp3" loop="loop" autoplay="autoplay"></audio>

<div class="box">
    <div style="transform: rotateY(0deg) translateZ(300px)">
        <img src="img/001.gif" >
    </div>
    <div style="transform: rotateY(40deg) translateZ(300px) ">
        <img src="img/002.gif" >
    </div>
    <div style="transform: rotateY(80deg) translateZ(300px) ">
        <img src="img/003.gif" >
    </div>
    <div style="transform: rotateY(120deg) translateZ(300px) ">
        <img src="img/004.gif" >
    </div>
    <div style="transform: rotateY(160deg) translateZ(300px) ">
        <img src="img/005.gif" >
    </div>
    <div style="transform: rotateY(200deg) translateZ(300px) ">
        <img src="img/006.gif" >
    </div>
    <div style="transform: rotateY(240deg) translateZ(300px) ">
        <img src="img/007.gif" >
    </div>
    <div style="transform: rotateY(280deg) translateZ(300px) ">
        <img src="img/008.gif" >
    </div>
    <div style="transform: rotateY(320deg)  translateZ(300px) ">
        <img src="img/009.gif" >
    </div>
</div>
</body>
</html>