将全尺寸图像的大小和比例与SVG视图框匹配

我有一个团队成员名单。每个成员元素都由一个图像组成,该图像被剪切到白框内的一个圆中。当您将鼠标悬停在方框上时,图像将变为全尺寸。它的灵感来源于这个网站

我用SVG实现了同样的动画。然而,在上面的网站上,每幅图片都是300x350——与白色的容器盒大小相同。这将创建一个从蒙面图像到全尺寸图像的完美过渡-没有任何东西看起来会跳跃或移动。另一方面,我的图像有多种尺寸。因此,SVG的可见部分要么放大要么缩小图像,当您悬停时,整个图像将显示为跳转:。

如何获得与SVG视图框中的图像匹配的全尺寸图像的比例和大小,使其看起来不移动?

jsfiddle: http://jsfiddle.net/mzechar/afnxkt2h/2/

HTML:。

<li>
<a href=“”>
<文章>
<DIV>

<!--蒙面图像-->
<svg xmlns=“http://www.w3.org/2000/svg”version=“1.1”viewbox=“0 0 100 100”>
<defs>
<clipPath id=“circle”>
<circle cx=“50”cy=“50”r=“35”/>
</clippath>
</defs>
<image width=“100%”height=“100%”preservaaspectratio=“xminymin slice”xlink:href=“team/finishedbw/cck.jpg_uuujg”clip path=“url(circle)”/>
</svg>
</DIV>

<!--全曝光图像——>
<img class=“img full”src=“team/finishedbw/cck.jpg_uu.jpg”alt=“>

<!--圆环-->
<svg viewbox=“0 0 100 100”class=“circle ring”>
<circle cx=“50”cy=“50”r=“35”stroke=“white”stroke width=“5”fill=“transparent”/>gt;
</svg>

<DIV class=“bio”>
<h2>陈春康</h2>
<h4>文章副标题</h4>
</DIV>
</Article>
</a>
</li>
<li>
CSS:。

团队列表{
职位:相对;
上边距:40px;
右边距:自动;
左边距:自动;
}

.团队列表li{
显示:内联块;
溢出:隐藏;
浮动:左;
高度:340px;
列表样式位置:内部;
利润率:1px 1px 1px;
背景色:fff;
}

.团队列表{
显示器:柔性;
柔性包装:包装;
调整内容:中心;
弯曲方向:行;
弹性流:行缠绕;
弯曲收缩:1;
弹性增长:1;
浮动:左;
最小宽度:0;
最大宽度:100%;
职位:相对;
滤镜:投影(5px 5px 5px rgba(2,2,22,0.1));
}

A{
显示:内联块;
}

文章{
职位:相对;
宽度:300px;
高度:350px;
/*防止缩放圆环触发悬停*/
溢出:隐藏;
}


/*创建颜色覆盖*/
文章:之后{
内容:“”;
位置:绝对;
顶部:0;
右:0;
底部:0;
左:0;
显示:无;
背景:RGBA(0,255,255,.2);
Z指数:3;
}


/*将完整图像置于SVG上方*/
.img已满{
位置:绝对;
顶部:0;
右:0;
Z指数:2;
/*最初隐藏完整图像*/
显示:无;
}

.圆环{
位置:绝对;
顶部:0;
Z指数:3;
/*最初用不透明度隐藏,因此可以设置动画*/
不透明度:0;
变换原点:50%50%;
变换:比例(1.8);
转换:转换。3秒容易,不透明。4秒容易;
}

A:悬停。img已满,
A:悬停文章:之后{
位置:绝对;
显示:块;
}

A:悬停。圆圈。{
不透明度:1;
变换:比例(1);
}

.生物{
位置:绝对;
底部:0;
填充:1REM 2REM;
颜色:000;
/*将文本保持在SVG、完整图像和覆盖之上*/
Z指数:4;
}

A:盘旋生物{
颜色:fff;
}


/*概述*/
氢气,
H4型{
边距:0;
字体系列:无衬线;
}

H4型{
字体粗细:300;
}
this website以下内容:





我用SVG实现了同样的动画。然而,在上面的网站上,每幅图片都是300x350——与白色的容器盒大小相同。这将创建一个从蒙面图像到全尺寸图像的完美过渡-没有任何东西看起来会跳跃或移动。另一方面,我的图像大小不一。因此,SVG的可见部分要么放大要么缩小图像,当您悬停时,整个图像看起来会跳跃。以下内容:







如何获得与SVG视图框中的图像匹配的全尺寸图像的比例和大小,使其看起来不移动?

J小提琴:http://jsfiddle.net/mzechar/afnxkt2h/2/

HTML:

 <li>
            <a href="#">
              <article>
                <div>

                  <!-- The masked image -->
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
                        <defs>
                                <clipPath id="circle">
                                        <circle cx="50" cy="50" r="35"/>
                                </clipPath>
                        </defs>
                        <image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="team/finishedBW/CCK.jpg__.jpg" clip-path="url(#circle)"/>
                </svg>
                </div>

                <!-- The full revealed image -->
                <img class="img-full" src="team/finishedBW/CCK.jpg__.jpg" alt="">

                <!-- The circle ring -->
                <svg viewBox="0 0 100 100" class="circle-ring">
        <circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
    </svg>

                <div class="bio">
                  <h2>Chun-Kang Chen</h2>
                  <h4>Article Subtitle</h4>
                </div>
              </article>
            </a>
          </li>
          <li>


CSS(中文):

.team-listing{
    position:relative;
    margin-top:40px;
    margin-right:auto;
    margin-left:auto;
}

.team-listing li{
    display:inline-block;
    overflow: hidden;
    float:left;
    height: 340px;
    list-style-position:inside;
    margin: 1px 1px 1px 1px;
    background-color:#fff;
}

.team-listing ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    flex-flow: row wrap;
    flex-shrink: 1;
    flex-grow: 1;
    float: left;
    min-width: 0;
    max-width: 100%;
    position: relative;
    filter: drop-shadow(5px 5px 5px rgba(2,2,22,0.1));
}

a {
  display: inline-block;
}

article {
  position: relative;
  width: 300px;
  height: 350px;
  /* prevent scaled circle ring from triggering hover */
  overflow: hidden;
}


/* create the colour overlay */
article:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: rgba(0, 255, 255, .2);
  z-index: 3;
}


/* place full image above SVG */
.img-full {
  position: absolute;
  top: 0;
  right:0;
  z-index: 2;
  /* hide the full image initially */
  display: none;
}

.circle-ring {
  position: absolute;
  top: 0;
  z-index: 3;
  /* initially hidden with opacity so it can be animated */
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.8);
  transition: transform .3s ease, opacity .4s ease;
}

a:hover .img-full,
a:hover article:after {
  position:absolute;
  display: block;
}

a:hover .circle-ring {
  opacity: 1;
  transform: scale(1);
}

.bio {
  position: absolute;
  bottom: 0;
  padding: 1rem 2rem;
  color: #000;
  /* keep text above SVG, full image and overlay */
  z-index: 4;
}

a:hover .bio {
  color: #FFF;
}


/* general */
h2,
h4 {
  margin: 0;
  font-family: sans-serif;
}

h4 {
  font-weight: 300;
}