主页 / 问题 / 1071949
Accepted
ioprst
Asked:2020-01-20 13:48:15 +0000 UTC2020-01-20 13:48:15 +0000 UTC

使用 CSS 动画时如何设置轴心点

  • 772

使用 CSS 动画时如何将枢轴点设置为中心？

transform-origin: center center;没有帮助

<svg xmlns:ev="http://www.w3.org/2001/xml-events"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg" 
          baseProfile="full" height="100%" version="1.1" 
          viewBox="0 0 1024 768" width="100%">
    	<defs>
    		<style type="text/css">
    			@keyframes rotate {
    				0% {transform: rotate(0deg); transform-origin: center center;}
    				100% {transform: rotate(360deg); transform-origin: center center;}
    
    				0% {fill: #ffff00;}
    				50% {fill: #ff0000;}
    				100% {fill: #ffff00;}
    			}
    			.d {
    				animation: rotate 1s linear infinite;
    			}
    		</style>
    	</defs>
      <rect x="250" y="250" width="100" height="100" class="d"/>
    </svg>

css

2 个回答

  1. 有必要为具有 value的类d添加一个属性。@hu-fo 的评论transform-boxfill-box

    结果：

    <svg xmlns:ev="http://www.w3.org/2001/xml-events"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg" 
          baseProfile="full" height="100%" version="1.1" 
          viewBox="0 0 1024 768" width="100%">
    	<defs>
    		<style type="text/css">
    			@keyframes rotate {
    				0% {transform: rotate(0deg); transform-origin: center center;}
    				100% {transform: rotate(360deg); transform-origin: center center;}
    
    				0% {fill: #ffff00;}
    				50% {fill: #ff0000;}
    				100% {fill: #ffff00;}
    			}
    			.d {
    				transform-box: fill-box;
    				animation: rotate 1s linear infinite;
    			}
    		</style>
    	</defs>
      <rect x="250" y="250" width="100" height="100" class="d"/>
    </svg>

    • 5
  2. Best Answer

    相同的动画，但在 SVG 中。 

    <svg  xmlns:xlink="http://www.w3.org/1999/xlink"      xmlns="http://www.w3.org/2000/svg" 
           height="100%" width="100%"  
          viewBox="0 0 1024 768" >
    	
      <rect x="250" y="250" width="100" height="100" class="d" fill="#ffff00">
	    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="1s" values="0 300 300;360 300 300" repeatCount="indefinite" />
		  <animate attributeName="fill" begin="0s" dur="1s" values="#ffff00;#ff0000;#ffff00" repeatCount="indefinite" />
	</rect>	
    </svg>

    • 5

相关问题