html - 将全尺寸图像的大小和比例与 SVG viewbox 匹配

Question

我有一份团队成员名单。每个成员元素都包含一个在白色框内裁剪成圆形的图像。当您将鼠标悬停在框上时，图像会变为全尺寸。它的灵感来自 this website :

我用 SVG 实现了同样的动画。然而，在上面的网站中，每张图片正好是 300X350——与白色容器框的大小相同。这创建了从蒙版图像到全尺寸图像的完美过渡 - 没有任何东西出现跳跃或移动。 另一方面，我的图像有多种尺寸。结果，SVG 的可见部分要么放大要么缩小图像，当您将鼠标悬停时，整个图像似乎在跳跃:

我怎样才能使全尺寸图像的比例和大小与 SVG View 框中的相匹配，这样它看起来就不会移动？

JSFiddle: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;
}

Answer 1

对 SVG 内容充满信心。不需要定义两个<svg>元素和 HTML <img>中间。只需将图像放在 <image> 中一个里面的标签 <svg> parent，并根据悬停状态设置/删除剪辑路径。

剪辑路径本身保留在一个单独但隐藏的 <svg> 中因此它可以重复用于多个图像。

如果图像尺寸和它们显示正确剪辑内容的位置不同，最好不要依赖 preserveAspectRatio , 但要绝对设置它们。 (在 overflow:hidden 元素上设置 <svg> 更像是一种预防措施，因为无论是否为默认值，规范都发生了一些变化。)

a {
    display: inline-block;
}
article {
    position: relative;
    width: 300px;
    height: 350px;
    overflow: hidden;
}
article::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background: rgba(0, 255, 255, .2);
    z-index: 3;
}
.portrait {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.portrait image {
    clip-path: url(#circle);
}
a:hover .portrait image {
    clip-path: none;
}
a:hover article:after {
  position: absolute;
  display: block;
}
.ring {
    fill: none;
    stroke: white;
    stroke-width: 1;
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(1.8);
    transition: transform .3s ease, opacity .4s ease;
}
a:hover .ring {
    opacity: 1;
    transform: scale(1);
}
.bio {
    position: absolute;
    bottom: 0;
    padding: 1rem 2rem;
    color: #000;
}
h2 {
    font-size: 1.5em;
    font-weight: bold;
}
h4 {
    font-weight: 300;
}
h2, h4 {
    margin: 0;
    font-family: sans-serif;
}

<svg width="0" height="0">
  <clipPath id="circle">
    <circle cx="150" cy="150" r="100"/>
  </clipPath>
</svg>
<a href="#">
  <article>
    <svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <!-- no automatic sizing for SVG image, width and height must be set -->
      <image width="400" height="300" x="-100" y="0"
             xlink:href="http://api.leafsnap.com/v1/team/images/columbia/Neeraj.jpg?h=300"/>
      <circle class="ring" cx="150" cy="150" r="100" />
    </svg>
    <div class="bio">
      <h2>Chun-Kang Chen</h2>
      <h4>Article Subtitle</h4>
    </div>
  </article>
</a>