Question

我有一个团队成员列表。每个成员元素都包括一个在白框内以圆圈裁剪的图像。当您将鼠标悬停在框上时，图像将变为全尺寸。它的灵感来自this website：

我使用SVG实现了相同的动画。但是，在上面的网站中，每个图像正好是300X350-与白色容器盒的尺寸相同。这可实现从遮罩图像到完整图像的完美过渡-似乎没有跳跃或移动的迹象。 另一方面，我的图像有各种尺寸。结果，SVG的可见部分将放大或缩小图像，并且当您将鼠标悬停时，整个图像似乎会跳转：

如何在SVG视图框中获取完整尺寸的图像的比例和大小，以使其看起来不动？

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

裁剪图像，扔掉那些无用的标签，并且每幅图像只能使用一次。希望这会有所帮助：

section.team {
  margin: auto;
  background: #fefefe;
}

.team-listing {
  position: relative;
  margin: 40px auto 0;
  display: flex;
  filter: drop-shadow(5px 5px 5px rgba(2, 2, 22, 0.1));
}

.team-listing li {
  overflow: hidden;
  height: 350px;
  list-style: none;
  margin: 1px;
  background-color: #fff;
}

article {
  position: relative;
  top: 0;
  width: 300px;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-full {
  -webkit-clip-path: circle(30% at 50% 50%);
  clip-path: circle(30% at 50% 50%);
  width: 500px;
}

a:hover .img-full {
  -webkit-clip-path: none;
  clip-path: none;
  filter: sepia(100%);
}

.circle-ring {
  position: absolute;
  top: 0;
  z-index: 3;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.8);
  transition: transform 0.3s ease, opacity 0.4s ease;
}

a:hover .circle-ring {
  opacity: 1;
  transform: scale(1);
}

.bio {
  position: absolute;
  bottom: 0;
  margin: 2rem;
  color: #000;
}

a:hover .bio > h2 {
  color: #fff;
}

h2,
h4 {
  margin: 0;
  font-family: sans-serif;
}

h4 {
  font-weight: 300;
}

<section class="content-wrapper team">
  <ul class="team-listing">
    <li>
      <a href="#">
        <article>
          <img class="img-full" src="https://i.imgur.com/6eRLJ4I.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" />
          </svg>
        </article>
        <div class="bio">
          <h2>Article Title</h2>
          <h4>Article Subtitle</h4>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <article>
          <img class="img-full" src="https://i.imgur.com/6eRLJ4I.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" />
              </svg>
        </article>
        <div class="bio">
          <h2>Article Title</h2>
          <h4>Article Subtitle</h4>
        </div>
      </a>
    </li>
  </ul>
</section>

Answer 2

对SVG内容有信心。无需定义两个<svg>元素和一个HTML <img>之间的元素。只需将图像放在一个<image>父对象中的<svg>标签中，然后根据悬停状态设置/删除剪辑路径。

剪辑路径本身保留在单独但隐藏的<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>

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

2 个答案: