为啥我的 SVG 'frame' 动画没有在悬停时播放？

Posted 2023-03-06

【中文标题】为啥我的 SVG \'frame\' 动画没有在悬停时播放？

【英文标题】：Why isn't my SVG 'frame' animation playing on hover?为什么我的 SVG 'frame' 动画没有在悬停时播放？

【发布时间】：2022-01-06 07:46:39

【问题描述】：

我被这个 CSS 动画卡住了。 悬停时框架应该是动画的。从顶部中心开始，一直画到最后。

有人对此有解决方案吗？

          @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
          body
              font-family: 'Roboto', sans-serif;
          
          a.teaser-card-link 
              text-decoration: none;
          
          .card
              background-size: cover !important;
              background-repeat: no-repeat !important;
              max-width: 425px;
              border-radius: 10px;
              overflow: hidden;
          
          .caption 
            padding: 20px;
          
          .dark-cover:hover 
            background: url('https://svgshare.com/i/cP2.svg');
            background-repeat: no-repeat;
            background-attachment: fixed;            
          
          .card .caption p.card-title
            font-size: 22px;
            font-weight: bold;
            text-align: left;
            margin: 0;
            padding: 0;
            letter-spacing: 1px;
            padding-bottom: 20px;
            margin-top: 10px;
          
          .card .caption p.card-description
            font-size: 16px;
            font-weight: 300;
            text-align: left;
            margin: 0;
            padding: 0;
            letter-spacing: 1px;
            line-height: 1.5em;
            padding-bottom: 20px;
          
          .card .caption a.link-text
            font-size: 16px;
            font-weight: 300;
            text-align: left;
            margin: 0;
            padding: 0;
            letter-spacing: 1px;
            line-height: 1.5em;
            text-decoration: none;
            color: blue;
          
          a.teaser-card-link 
            text-decoration: none;
          

 <div class="card"> 
            <div class="dark-cover">
                <div class="cover">
                  <img src="https://i.stack.imgur.com/jLbFE.png" class="card-image">
                    <div class="caption">
                        <p class="card-title">CARD-TEST</p>
                        <p class="card-description">Hier kannst du dich austauschen und offen über deine Gefühle und Sorgen sprechen.</p> 
                        <a href="#" class="link-text">Hier mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>

到目前为止，我已经掌握了 html/CSS。我不知道哪种技术最适合这个。 SVG、PNG 或纯 CSS，因为这在技术上是一个边框。

<svg class="svg-border" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 409 273" fill="none">

【问题讨论】：

我不确定我脑海中的答案，但如果您查看这 23 个动画边框，您可能会在为每个边框提供的代码中找到一些线索。 freefrontend.com/css-border-animations

你也可以在这里上传你的矢量图吗？理想情况下，SO 上的内容应该是独立的。

@tylerH 更新 + 添加资产。

【参考方案1】：

您可以添加 svg 的代码并将转换添加到 stroke-dashoffset 属性

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body 
  font-family: 'Roboto', sans-serif;


a.teaser-card-link 
  text-decoration: none;


.card 
  background-size: cover !important;
  background-repeat: no-repeat !important;
  max-width: 425px;
  border-radius: 10px;
  overflow: hidden;


.caption 
  padding: 20px;



.svg-border 
  position: absolute;
  left: 0;


.dark-cover .svg-border path 
  stroke-dasharray: 0 1213 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s;


.dark-cover:hover .svg-border path 
  stroke-dasharray: 0 1213 0;
  stroke-dashoffset: 1213;


.card .caption p.card-title 
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  padding-bottom: 20px;
  margin-top: 10px;


.card .caption p.card-description 
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  line-height: 1.5em;
  padding-bottom: 20px;


.card .caption a.link-text 
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  line-height: 1.5em;
  text-decoration: none;
  color: blue;


a.teaser-card-link 
  text-decoration: none;

<div class="card">
  <div class="dark-cover">
    <div class="cover">
      <img src="https://i.ibb.co/RBfxDkJ/Vector.png" class="card-image">
      <svg class="svg-border" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 409 273" fill="none">
<path d="M359.013 249.05L359.036 249.048L359.059 249.046C372.423 248.323 381.287 246.263 387.415 241.958C393.488 237.693 397.044 231.098 399.478 220.852C400.472 214.751 401.014 208.608 401.099 202.457L401.1 202.441L401.1 202.425C401.826 185.916 402.511 169.404 403.196 152.896C404.578 119.605 405.96 86.33 407.667 53.1237L407.667 53.1207C407.881 49.1784 407.591 42.6982 406.02 36.1632C404.444 29.6075 401.617 23.1541 396.874 19.0845L396.84 19.0556L396.809 19.0239C392.109 14.2522 386.196 10.3001 379.441 7.43138C372.686 4.56277 365.245 2.84438 357.595 2.39153L357.577 2.39046L357.559 2.38879C353.731 2.03166 349.539 1.90534 344.812 2.12084C320.437 3.23341 296.153 4.18062 271.921 5.12577C210.717 7.51297 149.85 9.88705 88.7201 14.8793C68.9517 16.5477 53.3328 18.7741 41.1174 22.149C28.9037 25.5236 20.1743 30.0247 14.1071 36.1869C1.99865 48.4848 0.131327 67.7789 3.41751 99.5416L3.41766 99.5431C7.51328 139.68 13.2423 179.816 18.9615 219.884C19.8603 226.181 20.7589 232.476 21.6509 238.769C23.367 250.056 26.583 257.426 32.8765 262.282C39.2232 267.179 48.8871 269.672 63.8952 270.686C81.9828 271.846 100.195 271.458 118.405 271.071C127.516 270.877 136.626 270.684 145.72 270.684C153.108 270.684 183.491 267.861 219.692 264.118C255.851 260.379 297.714 255.732 327.984 252.102L327.995 252.101L328.006 252.1L359.013 249.05Z" stroke="#D76119" stroke-/>
</svg>
      <div class="caption">
        <p class="card-title">CARD-TEST</p>
        <p class="card-description">Hier kannst du dich austauschen und offen über deine Gefühle und Sorgen sprechen.</p>
        <a href="#" class="link-text">Hier mehr erfahren</a>
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢您的回答。不幸的是，我无法让它响应。

@Ferkan 如果响应性是一项要求，最好将其添加到问题中。不过，总的来说，这个问题可能会对您有所帮助：***.com/questions/25940741/making-svg-responsive