2
Ich habe ein SVG - Bild Ich möchte CSS transform anwenden ... es funktionierte aber es verhält sich sehr viel .. Ich möchte den Pfad des SVG um einen festen Punkt drehen, genau wie der Sekundenzeiger in der Uhr .. hier ist was ich bisher erreicht habe ... Wie kann ich diese Hand (Svg Pfad oder Gruppe) um einen festen Punkt drehen. Siehe mein Code Snippet für weitere Informationen. DANKE IM VORAUS.Transformation in SVGs
\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>