底部文本上SVG的剪切路径不起作用我想在没有JavaScript或Smil的情况下达成目标

问题描述

基本上，剪辑路径'＃path-1'是动画的，我想将其应用于底部文本以达到打字机效果。我已经用SMIL代码制作了它，并且可以正常工作，但是此SVG是我的徽标，因此我希望将其上传到我的网站中，并且希望所有动画都在最常见和常用的网络浏览器中运行。

这就是为什么我只尝试使用CSS执行的原因。 SVG代码是这样的：

<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88">
<defs>  
   <clipPath id="path-1">  
     <path class="primarypath" d="M1421.75,395.66H8.58V322H1421.75 z" />  
   </clipPath>
   <clipPath id="path-2">  
     <path class="cls-x" d="M589,287.24H13V48H589Z"/>  
   </clipPath> 
 </defs>
<style>
@font-face {
font-family: 'Dense Regular';
font-style: normal;
font-weight: normal;
src: local('Dense Regular'),url('Dense-Regular.woff') format('woff');
}
.cls-1{fill:#3ee7ad; font-family:Dense;font-size:343px; letter-spacing:0.112em;-webkit-animation: slideup 1.5s forwards;
 animation: slideup 1.5s forwards;}
.cls-2{font-size:343px;font-family:Dense-Thin,Dense;font-weight:200;letter-spacing:0.112em;}
.cls-2{stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0);animation: stroke 7s 1 forwards ease-in-out; }
.cls-3{fill:#3ee7ad; font-family:Dense;}
.cls-3{font-size:73px; letter-spacing:0.206em;}
.cls-4{fill:#3ee7ad;}

@keyframes stroke {
    0%   {
        fill: rgba(62,0); stroke: rgba(62,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;
    }
    70%  {fill: rgba(62,1); }
    80%  {fill: rgba(62,1); stroke-width: 2; }
    100% {
        fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
    }
}
@keyframes slideup {
  0%   {transform: translate(0,450px);}

   100% {transform: translate(0,287px);}
}
/* The typing effect */
@keyframes typing {
  from { transform: scaleX(0);}
  to {transform: scaleX(1);  }
}


@keyframes fade-in {
  from { opacity: 0;}
  to {opacity: 1;}
}
  .primarypath {
      transform: scaleX(0);
  animation: 
    typing 3.5s forwards steps(38);
    animation-delay: 1s;
}
#palmdesign-logo:hover > .cls-2 {
    animation: stroke 7s infinite alternate ease-in-out;    
}

</style>

<text class="cls-1" transform="translate(0 287.26)">PALM</text>
<text class="cls-2" transform="translate(625 287.26)">DESIGN</text>
<text class="cls-3" transform="translate(13.69 385.74)">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA
</text>
</svg>

但是当我尝试链接剪辑路径时

<clipPath id="path-1">

（这是动画路径）

<text class="cls-3"

以这种方式做

<text class="cls-3" transform="translate(13.69 385.74)" clip-path="url(#path-1)">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA

底部的文本消失了。我想念什么吗？

解决方法

@font-face {
font-family: 'Dense Regular';
font-style: normal;
font-weight: normal;
src: local('Dense Regular'),url('Dense-Regular.woff') format('woff');
}
.cls-1{fill:#3ee7ad; font-family:Dense;font-size:343px; letter-spacing:0.112em;-webkit-animation: slideup 1.5s forwards;
 animation: slideup 1.5s forwards;}
.cls-2{font-size:343px;font-family:Dense-Thin,Dense;font-weight:200;letter-spacing:0.112em;}
.cls-2{stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0);animation: stroke 7s 1 forwards ease-in-out; }
.cls-3{fill:#3ee7ad; font-family:Dense;}
.cls-3{font-size:73px; letter-spacing:0.206em;}
.cls-4{fill:#3ee7ad;}

@keyframes stroke {
    0%   {
        fill: rgba(62,0); stroke: rgba(62,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;
    }
    70%  {fill: rgba(62,1); }
    80%  {fill: rgba(62,1); stroke-width: 2; }
    100% {
        fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
    }
}
@keyframes slideup {
  0%   {transform: translate(0,450px);}

   100% {transform: translate(0,287px);}
}
/* The typing effect */
@keyframes typing {
  from { transform: scaleX(0);}
  to {transform: scaleX(1);  }
}

@keyframes fade-in {
  from { opacity: 0;}
  to {opacity: 1;}
}
  .primarypath {
      transform: scaleX(0);
  animation: 
    typing 3.5s forwards steps(38);
    animation-delay: 1s;
}
#palmdesign-logo:hover > .cls-2 {
    animation: stroke 7s infinite alternate ease-in-out;    
}

<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88">
<defs>  
   <clipPath id="path-1">  
     <path class="primarypath" d="M1421.75,395.66H8.58V322H1421.75 z" />  
   </clipPath>
   <clipPath id="path-2">  
     <path class="cls-x" d="M589,287.24H13V48H589Z"/>  
   </clipPath> 
 </defs>
<text class="cls-1" transform="translate(0 287.26)">PALM</text>
<text class="cls-2" transform="translate(625 287.26)">DESIGN</text>
<g id="text-bottom" clip-path="url(#path-1)">
<text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA
</text>
</g>
</svg>