html - 使用 svg 和 html 缩放和定位

Question

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

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

编辑:如果有帮助，我会以 Angular 运行所有内容。

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%。因为您在谈论响应式工作，您是否考虑过研究 bootstrap？

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