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

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

我尝试使用父容器，但在SVG+HTML中不起作用。 我也尝试过使用媒体查询，但这只会限制我的大小，而这正是我不想做的

编辑：如果有帮助的话，我会用angular运行一切

HTML（svg）：

CSS:

我是否需要使用一些编辑工具来切入眼球并重新制作项目？我真的不想那样，因为我对这些都没有经验

---

我想做的是（正如一个好小伙子指出的那样）眼睛总是留在镜头里（不管大小）。当我放大或缩小时，位置是相同的（使用css定心技巧）。代码的眼睛不是我的（）。我只是觉得将其添加到镜头中会很酷，但我在操作SVG方面缺乏经验。

通常，您会希望对宽度和高度应用100%的效果。这将允许您的元素缩放其父元素100%的高度和宽度。因为你说的是反应性的工作，你有没有考虑过引导？

---

我也不能放大或缩小你的小提琴。

你能再解释一下你的问题吗？什么东西没有发挥应有的作用，你到底想实现什么？我正在努力让它响应。当我放大和缩小时，眼睛停留在镜头中。就这样。编辑：我的一个朋友建议使用编辑软件（photoshop），但我在这些方面做得很差，我认为格式不正确，促使我重做整件事。也许可以尝试使用百分比值而不是像素值来表示眼睛的宽度和高度？@04FS你确定我们在看同一把小提琴吗？是的，我也尝试过这样做。为SVG和html div定义id和/或类。但它似乎不起作用。我从css类中删除了

max-width

和

max-height

，并对它们进行了修改，但它们都没有改变大小。我觉得自己在这里很傻。我是否遗漏了一些基本的css规则？？？你绝对没有理由这么说。问问题没有错。这就是造成堆栈溢出的原因。如果您使用“viewBox=“0 0 854.56 300”，您可能会发现它紧跟在容器后面，但是视觉中断。如果我帮不上什么忙，请原谅。

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%;
}