2017-04-23 36 views
2

我有一个SVG图像我想要将CSS变换应用到...它工作但是它行为不正常..我想SVG的路径围绕一个固定点旋转,就像第二只手在时钟..这是我迄今为止所取得的成果...我如何可能旋转此手(svg路径或组)围绕一个固定点..请参阅我的代码段以获取更多信息。提前致谢。SVG中的变换

\t \t \t \t html{ 
 
\t \t \t \t \t min-height: 100%; 
 
\t \t \t \t } 
 
\t \t \t body{ 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t min-height: 625px; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t \t align-items: center; 
 
\t \t \t \t align-content: center; 
 
\t \t \t \t align-items: center; 
 

 
\t \t \t } 
 
\t \t \t .fil3 { 
 
\t \t \t  animation: rotate 5s infinite; 
 
\t    transition: all 0.5s; 
 
\t    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 
 
\t \t \t \t transform-origin: center; 
 
\t \t \t } 
 
\t \t \t @keyframes rotate { 
 
\t \t \t 100% { 
 
\t \t \t  transform: rotate(360deg); 
 
\t \t \t } 
 
\t \t \t }
<?xml version="1.0" encoding="UTF-8"?> 
 
\t \t <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 
\t \t <!-- Creator: CorelDRAW X7 --> 
 
\t \t <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300px" height="500px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
 
\t \t viewBox="-950 0 2111 828" 
 
\t \t xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t \t <defs> 
 
\t \t <style type="text/css"> 
 
\t \t <![CDATA[ 
 
\t \t  .fil2 {fill:#848688} 
 
\t \t  .fil4 {fill:#F8A25F} 
 
\t \t  .fil1 {fill:#848688;fill-rule:nonzero} 
 
\t \t  .fil3 {fill:#F8A25F;fill-rule:nonzero;} 
 
\t \t  .fil0 {fill:#A0CD47;fill-rule:nonzero} 
 
\t \t ]]> 
 
\t \t </style> 
 
\t \t </defs> 
 
\t \t <g id="Layer_x0020_1"> 
 
\t \t <metadata id="CorelCorpID_0Corel-Layer"/> 
 
\t \t <path class="fil0" d="M347 478l0 154 0 146c0,38 24,45 37,45 12,0 37,-7 37,-45l0 -149 0 -148 0 -149c0,-38 -25,-45 -37,-45 -13,0 -37,7 -37,45l0 146z"/> 
 
\t \t <path class="fil1" d="M479 266l-109 110 -103 103c-27,27 -14,49 -5,58 9,9 31,22 58,-5l105 -106 105 -105 236 -237c27,-27 14,-49 5,-58 -8,-9 -31,-22 -58,5l-234 235z"/> 
 
\t \t <circle class="fil2" cx="384" cy="414" r="82"/> 
 
\t \t <g> 
 
\t \t <path class="fil3" d="M119 155l105 114 242 262c25,28 39,25 44,20 4,-4 9,-17 -17,-45l-244 -265 -100 -109 -101 -109c-26,-28 -40,-24 -44,-20 -5,4 -10,17 16,45l99 107z"/> 
 
\t \t </g> 
 
\t \t <circle class="fil4" cx="384" cy="414" r="37"/> 
 
\t \t </g> 
 
\t \t </svg>

回答

1

transform-orgin你应该指定时钟的中心。可以直接从钟面中心的橙色圆圈的坐标cxcy中读取坐标。

transform-origin: 384px 414px; 

您的演示与变化更新:

html{ 
 
\t \t \t \t \t min-height: 100%; 
 
\t \t \t \t } 
 
\t \t \t body{ 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t min-height: 625px; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t \t align-items: center; 
 
\t \t \t \t align-content: center; 
 
\t \t \t \t align-items: center; 
 

 
\t \t \t } 
 
\t \t \t .fil3 { 
 
\t \t \t  animation: rotate 5s infinite; 
 
\t    transition: all 0.5s; 
 
\t    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 
 
\t \t \t \t transform-origin: 384px 414px; 
 
\t \t \t } 
 
\t \t \t @keyframes rotate { 
 
\t \t \t 100% { 
 
\t \t \t  transform: rotate(360deg); 
 
\t \t \t } 
 
\t \t \t }
<?xml version="1.0" encoding="UTF-8"?> 
 
\t \t <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 
\t \t <!-- Creator: CorelDRAW X7 --> 
 
\t \t <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300px" height="500px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
 
\t \t viewBox="-950 0 2111 828" 
 
\t \t xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t \t <defs> 
 
\t \t <style type="text/css"> 
 
\t \t <![CDATA[ 
 
\t \t  .fil2 {fill:#848688} 
 
\t \t  .fil4 {fill:#F8A25F} 
 
\t \t  .fil1 {fill:#848688;fill-rule:nonzero} 
 
\t \t  .fil3 {fill:#F8A25F;fill-rule:nonzero;} 
 
\t \t  .fil0 {fill:#A0CD47;fill-rule:nonzero} 
 
\t \t ]]> 
 
\t \t </style> 
 
\t \t </defs> 
 
\t \t <g id="Layer_x0020_1"> 
 
\t \t <metadata id="CorelCorpID_0Corel-Layer"/> 
 
\t \t <path class="fil0" d="M347 478l0 154 0 146c0,38 24,45 37,45 12,0 37,-7 37,-45l0 -149 0 -148 0 -149c0,-38 -25,-45 -37,-45 -13,0 -37,7 -37,45l0 146z"/> 
 
\t \t <path class="fil1" d="M479 266l-109 110 -103 103c-27,27 -14,49 -5,58 9,9 31,22 58,-5l105 -106 105 -105 236 -237c27,-27 14,-49 5,-58 -8,-9 -31,-22 -58,5l-234 235z"/> 
 
\t \t <circle class="fil2" cx="384" cy="414" r="82"/> 
 
\t \t <g> 
 
\t \t <path class="fil3" d="M119 155l105 114 242 262c25,28 39,25 44,20 4,-4 9,-17 -17,-45l-244 -265 -100 -109 -101 -109c-26,-28 -40,-24 -44,-20 -5,4 -10,17 16,45l99 107z"/> 
 
\t \t </g> 
 
\t \t <circle class="fil4" cx="384" cy="414" r="37"/> 
 
\t \t </g> 
 
\t \t </svg>

2

在SVG世间万物相对于轴原点(甚至变换),它不是行为不端。我改变了动画并删除了不需要的转换属性。请尝试以下操作:

\t \t \t \t html{ 
 
\t \t \t \t \t min-height: 100%; 
 
\t \t \t \t } 
 
\t \t \t body{ 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t min-height: 625px; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t \t align-items: center; 
 
\t \t \t \t align-content: center; 
 
\t \t \t \t align-items: center; 
 

 
\t \t \t } 
 
\t \t \t .fil3 { 
 
\t \t \t \t transform: translate(380px, 410px) rotate(0deg); 
 
\t \t \t  animation: rotate 5s infinite; 
 
\t \t \t } 
 
\t \t \t @keyframes rotate { 
 
\t \t \t 100% { 
 
\t \t \t  transform: translate(380px, 410px) rotate(360deg); 
 
\t \t \t } 
 
\t \t \t }
<?xml version="1.0" encoding="UTF-8"?> 
 
\t \t <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 
\t \t <!-- Creator: CorelDRAW X7 --> 
 
\t \t <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300px" height="500px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
 
\t \t viewBox="-950 0 2111 828" 
 
\t \t xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t \t <defs> 
 
\t \t <style type="text/css"> 
 
\t \t <![CDATA[ 
 
\t \t  .fil2 {fill:#848688} 
 
\t \t  .fil4 {fill:#F8A25F} 
 
\t \t  .fil1 {fill:#848688;fill-rule:nonzero} 
 
\t \t  .fil3 {fill:#F8A25F;fill-rule:nonzero;} 
 
\t \t  .fil0 {fill:#A0CD47;fill-rule:nonzero} 
 
\t \t ]]> 
 
\t \t </style> 
 
\t \t </defs> 
 
\t \t <g id="Layer_x0020_1"> 
 
\t \t <metadata id="CorelCorpID_0Corel-Layer"/> 
 
\t \t <path class="fil0" d="M347 478l0 154 0 146c0,38 24,45 37,45 12,0 37,-7 37,-45l0 -149 0 -148 0 -149c0,-38 -25,-45 -37,-45 -13,0 -37,7 -37,45l0 146z"/> 
 
\t \t <path class="fil1" d="M479 266l-109 110 -103 103c-27,27 -14,49 -5,58 9,9 31,22 58,-5l105 -106 105 -105 236 -237c27,-27 14,-49 5,-58 -8,-9 -31,-22 -58,5l-234 235z"/> 
 
\t \t <circle class="fil2" cx="384" cy="414" r="82"/> 
 
\t \t <g> 
 
\t \t <path class="fil3" d="M119 155l105 114 242 262c25,28 39,25 44,20 4,-4 9,-17 -17,-45l-244 -265 -100 -109 -101 -109c-26,-28 -40,-24 -44,-20 -5,4 -10,17 16,45l99 107z"/> 
 
\t \t </g> 
 
\t \t <circle class="fil4" cx="384" cy="414" r="37"/> 
 
\t \t </g> 
 
\t \t </svg>