使用 svg 和 html 进行缩放和定位

Question

我有一个包含SVG图像的html文件。我有一个眼睛动画，它跟随我想放入镜头的光标。问题是我真的不知道该怎么做。

我尝试使用父容器，但这不适用于 SVG + HTML。 我也尝试使用媒体查询，但这只会限制我的大小，这是我不想做的。

编辑：如果有帮助，我会以角度运行所有内容。

HTML ( svg(： https://jsfiddle.net/nitko_i_nista/kjhx4mer/

.CSS：

body{
padding:0;
margin:0;
background:#333;
}
.eye {
width: 115px;
height: 105px;
max-width: 100%;
max-height: auto;
background: rgb(255, 255, 255);
position: absolute;
top: 15.5%;
left: 28.2%;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 60% 75%;
overflow: hidden;
}
.fakeeye {
width: 115px;
height: 115px;
max-width: 100%;
max-height: auto;
background: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
border-radius: 60% 75%;
overflow: hidden;
}
.ball{
width:13px;
height:13px;
background:#222f3e;
border-radius:50%;
border:18px solid #576574;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%) rotate(-45deg);          
}
.shut{
width:125px;
height:118px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(-45deg);
z-index:999;
}
.shut span{
display:block;
width:100%;
height:0%;
background:#0072e2;
border-radius: 0 0 60% 60%;
transition:0.4s all;
}
.eye:hover > .shut span{
height:100%;
}

我是否必须使用一些编辑工具来切入眼睛并再次制作项目？我真的不想这样，因为我对这些非常缺乏经验。

我想做的(正如一个漂亮的小伙子所指出的(是眼睛始终停留在晶状体中(无论大小如何(。当我放大或缩小时，位置是相同的(使用居中 css 技巧(。代码的眼睛不是我的(https://codepen.io/guldus/pen/xmpVRb?editors=1100(。我只是认为将其添加到镜头中会很酷，但我在操作 SVG 方面缺乏经验。

Answer 1

通常，您希望对宽度和高度应用 100%。这将允许您的元素缩放其父元素的高度和宽度的 100%。因为你在谈论响应式工作，你有没有考虑过引导？

我也无法放大或缩小你的小提琴。