我有一个SVG可以围绕svg旋转，但不固定 [英] I have one SVG that is rotate around a svg but is not fixed
问题描述
<!--BG Photo-->
<div class="pic1"><img src="1.svg"></div>
<!--SVG that will rotate-->
<div class="pic2"><img src="img/vec/gz4.svg" alt=""></div>
.pic1 img{/*Bg Photo*/
width: 100%;
height: auto;
top: 0;
left: 0;
}
.pic2{
position: absolute;
transform: translate(45px,-75px);
}
.pic2 img{
transform-origin:center;
width: 50px;
height: 50px;
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
问题是当我扩大/调整浏览器.pic2的大小时会发生什么
The problem is what when i zoon out/in or resize the brower .pic2
移动不固定在他的原始点上
is moving not stay fixed on his original point
推荐答案
您的想法是正确的，但两张SVG图像都会根据可用空间的比例进行调整(您是否仅在其中定义了viewBox，并删除了height和width属性?).因此，第二图像(pic2)将始终弹跳"到图像.调整大小时(但是有多少网络用户真正做到了?).
Your idea is right yet both SVG images will adjust to the proportion of the available space (do you have only viewBox defined in them, removing the height and width attributes?). So the second image (pic2) will always "bounce" when resizing (but how many web users really do that?).
也许可以通过使用vw和vh单位(而不是像素，还可以是百分比)在其DIV父级(或您希望的容器"元素)中为这两种SVG定义样式，这至少会为您提供更可预测的结果:
Maybe define styles for both SVGs in their DIV parent (or "container" element if you wish) by using vw and vh units - instead of pixels, possibly percentages as well - and this will at least give you more predictable result:
<style>
body {
border: 0;
margin: 0;
}
.pic1 {
position: absolute;
width: 100%;
border: 0;
margin: 0;
}
.pic1 img{/*Bg Photo*/
width: 100%;
height: auto;
top: 0;
left: 0;
}
.pic2{
position: absolute;
z-index: -1;
transform: translate(2.5vw,88vh);
}
.pic2 img{
transform-origin:center;
width: 50px;
height: 50px;
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>
<body>
<!--BG Photo-->
<div class="pic1"><img src="1.svg"></div>
<!--SVG that will rotate-->
<div class="pic2"><img src="img/vec/gz4.svg" alt=""></div>
</body>
这篇关于我有一个SVG可以围绕svg旋转，但不固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
