Question

.container{
    width: 300px;
    height:328.69px;
    margin-left: 200px;
    margin-top: 100px;
}

#Layer_2 {
    transform: scale(1);
    fill: #F78F1E;
    transition: fill 2s;
}


#Layer_2:hover{
    fill: url(#grad);
    transform: scale(1.1);
    
}

.st0{
    fill: #F78F1E;
    transition: fill 2s;
}

#Layer_2:hover .st0{
    fill: url(#grad)
}

p {
   text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

#mindgrub {
    font-size: 30px;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
    
}

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="UTF-8" />
    <meta http-eqiuv="X-UA-Compatible" content="IE=edge, chrome-1">
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
    <title>Mindgrub Logo Animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="container" >
  
     <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 973.5 1066.6" style="enable-background:new 0 0 973.5 1066.6;" xml:space="preserve">
            <defs>
                

            </defs>
        
        <rect />    
            

    
    
    
    
   

            
<radialGradient id="grad" cx="486.7992" cy="539.5079" r="496.7503" gradientUnits="userSpaceOnUse">
	<stop  offset="0.5703" style="stop-color:#BB131B"/>
	<stop  offset="0.5716" style="stop-color:#BC151B"/>
	<stop  offset="0.6012" style="stop-color:#CC351C"/>
	<stop  offset="0.6336" style="stop-color:#D9511C"/>
	<stop  offset="0.6705" style="stop-color:#E4681D"/>
	<stop  offset="0.7128" style="stop-color:#ED791D"/>
	<stop  offset="0.7641" style="stop-color:#F3861E"/>
	<stop  offset="0.8334" style="stop-color:#F68D1E"/>
	<stop  offset="1" style="stop-color:#F78F1E"/>
</radialGradient>
<path class="st0" d="M950.9,506.9c10.3-13.6,14.7-30.7,13.1-47.7c-5.8-60.5-43.2-270.1-285.2-393.2c-172-87.5-354.4-20.5-463.8,46.2
	C141.2,157.4,73.7,239.3,45.1,321C11.6,416.5-1.2,506,18.8,612.2C40.4,727,117.6,891,297.6,957.2c0,0,35,94.9,177.5,97.5
	c179.5,3.2,206.4-103.9,206.4-103.9S919.6,836,928.6,661.4c2-39.3-25.1-74.3-63.8-81.7c-15.6-3-33.2-3.2-59.7-2.5h-56.2
	c0,0-26.2,3.2-36.2-30.3c-8.2-27.3-39.6-121.3-50.9-155.1c-4.6-13.8-13.4-25.9-25.4-34.1c-8.1-5.5-18.2-9.8-29.9-9.3
	c-31.2,1.2-48.8,22.5-56.2,46.2c-6.8,21.4-39,119.2-45.2,138.1c-1.3,3.8-3,7.5-5.3,10.8c-4.7,6.9-13,14.1-22.2,1.5
	c-3.4-4.6-6.2-9.5-7.9-15l-42-136.6c0,0-12.5-47.5-58.8-46.2c-26.4,0.7-45.5,29.2-57,53.5c-6.7,14-11.7,28.8-15.3,43.9
	c-7,29.7-29.1,117.1-47.7,126.4c-22.5,11.2-31.2,28.8-20,48.8s52.5,18.8,71.2-15s55-153.8,55-153.8s11.2-40,28.8-1.2
	s52.8,150,52.8,150s13.3,35,51.5,35s53.2-45,53.2-45l44.8-126.1c1.6-4.6,4-8.9,7.1-12.6c5.6-6.6,14.6-12.7,24.1-0.1
	c3.1,4.1,5.2,9,6.2,14.1c7.2,35,32.7,119.7,32.7,119.7s8.8,43.8,60,51.2c37.7,0,78.9-0.7,96.9-1.1c10.5-0.2,20.8,3.4,28.4,10.6
	c9.2,8.6,12.9,29.1,3.4,46.7c-24.1,44.7-78.1,137.1-209.1,200.7c-0.7,0.3-1.2,0.9-1.3,1.6c-1,5.5-5.1,23.7-12.9,34.9
	c-5.9,8.5-35.4,52.8-126.7,51.6s-136.2-26.2-153.8-90c0,0-176.2-95-212.5-238.8s-20-270,42.5-307.5c0,0-12.5-137.5,126.2-140
	c0,0,67.3-137.5,190.5-51.2c0,0,123.2-103.8,187,55c0,0,135-12.5,126.2,143.8c0,0,58.3,3.6,63.5,125.5c0.5,12,4.6,23.7,12.3,33
	c7.7,9.3,19.7,17.6,38,16.5C931.8,526.2,943.2,517.1,950.9,506.9z"/>
</svg>

   
</div>
 
    
<p id="mindgrub"><strong>Mindgrub Technologies</strong></p>    
    
</body>




</html>

整个svg文件的id为“Layer_2”，路径的类为“st0”。使用悬停，转换和转换我试图让填充和比例变化超过2秒。现在只有比例增加超过2秒，但不是填充。填充立即改变。这是代码：

#Layer_2 {
transform: scale(1);
fill: #F78F1E;
transition: 2s;
}


#Layer_2:hover{
fill: url(#grad);
transform: scale(1.1);

}

如何使用CSS填充SVG进行转换

0 个答案: