文章/答案/技术大牛

发布

社区首页 >问答首页 >带有SVG剪辑的动画div -路径没有响应？

问带有SVG剪辑的动画div -路径没有响应？
EN

Stack Overflow用户

提问于 2022-02-03 03:39:54

回答 2查看 181关注 0票数 2

我有一个使用css背景，动画和剪辑路径的DIV .无论我使用的是vh/vw还是百分比，svg都不会响应地进行缩放。当您改变窗口的高度时，它会适当地缩放，但当您更改窗口的宽度时，则不会。你能帮我找出哪种SVG实现才能让它有效率地达到1:1吗？我想在没有js的情况下完成这个任务，但我对此持开放态度。

HTML

.imageHero {
  max-width: 100%;
    max-height: 100%;
    width: 65vh;
  height: 65vh;
  margin: 40px;
  clip-path: url('#my-clip-path');
  animation: clipRotateAnim 6s linear infinite;
  position: relative;
  overflow: hidden;
}

.imageHero::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.r0tate {
        display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; 
    vertical-align: middle; 
    overflow: hidden; 
}

.svg-content { 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
    <div class="r0tate">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
</div>

<svg class="svg-content" viewBox="0 0 616.8 599" preserveAspectRatio="xMinYMin meet" height="0" width="0">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"></path></clipPath>
</svg>
</div>
</center>

小提琴这里

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-03 20:03:53

部分问题是你的宽度和最大宽度的定义.

本质上，你必须确保你的剪裁图像保持它的纵横比。

您可能实际上使用css aspect-ratio属性，但浏览器支持仍然不完善。因此，我们采取了传统的纵横比黑客。

   .imageHero::before {
        content: "";
        padding-bottom: 100%;
        width: 100%;
        display: block;
    }

.imageHero {
  max-width: 65vh;
  margin: 0 auto;
  clip-path: url('#my-clip-path');
  animation: clipRotateAnim 6s linear infinite;
  position: relative;
  overflow: hidden;
}


/* force aspect ratio 1:1 */
.imageHero::before {
  content: "";
  padding-bottom: 100%;
  width: 100%;
  display: block;
}

/* image */
.imageHero::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.imageHero-wrp {
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: #eee;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

<main>
  <div class="imageHero-wrp">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
    </div>

    <svg class="svg-content" viewBox="0 0 1 1">
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                    <path
                        d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1z">
                    </path>
                </clipPath>
            </svg>
  </div>
</main>

Smil动画剪辑-路径

作为另一种选择，您也可以通过<animateTransform>动画剪辑路径本身。

.imageHero {
  max-width: 65vh;
  margin: 40px auto;
  clip-path: url('#my-clip-path');
  position: relative;
  overflow: hidden;
}


/* force aspect ratio 1:1 */
.imageHero::before {
  content: "";
  padding-bottom: 100%;
  width: 100%;
  display: block;
}


/* image element */
.imageHero::after {
  content: "";
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  background: var(--i) center;
  background-size: cover;
}

.r0tate {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

<main>
  <div class="r0tate">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
    </div>

    <svg class="svg-content" viewBox="0 0 1 1" aria-hidden="true">
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                    <path
                        d="M0.5 0.755l-0.127 0.22l0-0.254l-0.221 0.127l0.128-0.22l-0.255 0l0.22-0.128l-0.22-0.127l0.255 0l-0.128-0.22l0.221 0.127l0-0.255l0.127 0.221l0.127-0.221l0 0.255l0.221-0.127l-0.128 0.22l0.255 0l-0.22 0.127l0.22 0.128l-0.255 0l0.128 0.22l-0.221-0.127l0 0.254z">
                        <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 0.5 0.5"
                        to="360 0.5 0.5"
                        dur="6s"
                        repeatCount="indefinite"/>
                    </path>
                </clipPath>
            </svg>
  </div>
</main>

这实际上可能更有表现力，因为您只是在旋转剪辑路径，而不是图像和父元素。

票数 3

Stack Overflow用户

发布于 2022-02-03 07:47:48

我准备了一个解决方案，如果你是这个意思的话。.imageHero{position: absolute;}，这就是我设置的全部内容，如果你想把它集中起来，再加上r0tate{display: flex; justify-content: center;}。

.imageHero {
  max-width: 60%;
  max-height: 60%;
  width: 65vh;
  height: 65vh;
  margin: 40px;
  clip-path: url("#my-clip-path");
  animation: clipRotateAnim 6s linear infinite;
  position: absolute;
  overflow: hidden;
}

.imageHero::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.r0tate {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

.svg-content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <center>
      <div class="r0tate">
        <div
          class="imageHero"
          style="--i: url(https://source.unsplash.com/600x600?summer)"
          width="100%"
          height="100%"
        ></div>

        <svg
          class="svg-content"
          viewBox="0 0 616.8 599"
          preserveAspectRatio="xMinYMin meet"
          height="0"
          width="0"
        >
          <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
            <path
              d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"
            ></path>
          </clipPath>
        </svg>
      </div>
    </center>
  </body>
</html>

小提琴手：https://jsfiddle.net/rmcnt9a1/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70965661

复制

相似问题

问带有SVG剪辑的动画div -路径没有响应？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有SVG剪辑的动画div -路径没有响应？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有SVG剪辑的动画div -路径没有响应？
EN