SVG und FIREFOX und transformieren Herkunft, warum nicht funktioniert?

Ich habe dieses Beispiel Svg wo Blume auf Kaffeetasse mit Transform-Herkunft Zentrum drehen sollte.SVG und FIREFOX und transformieren Herkunft, warum nicht funktioniert?

In anderen Browsern funktioniert es wie Champ, aber in Firefox rotiert zufällig.

Haben andere dieses Problem? Gibt es irgendwelche einfachen Fixes oder ich bin s ** t? : D

Vielen Dank für die Hilfe Jungs :)!

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666" 
 
\t xml:space="preserve"> 
 

 
\t <style> 
 

 
\t \t #coffeeFlower { 
 
\t \t \t -webkit-animation-name: coffeeFlower-animation; 
 
\t \t \t   animation-name: coffeeFlower-animation; 
 
\t  \t -webkit-animation-duration: 20s; 
 
\t  \t   animation-duration: 20s; 
 
\t  \t -webkit-animation-iteration-count: infinite; 
 
\t  \t   animation-iteration-count: infinite; 
 
\t  \t -webkit-transform-origin: center; 
 
\t  \t  -ms-transform-origin: center; 
 
\t  \t   transform-origin: center; 
 
\t  \t -webkit-animation-timing-function: linear; 
 
\t  \t   animation-timing-function: linear; 
 
\t \t } 
 

 
\t \t @-webkit-keyframes coffeeFlower-animation { 
 
\t \t  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 
 
\t \t  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} 
 
\t \t } 
 

 
\t \t @keyframes coffeeFlower-animation { 
 
\t \t  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 
 
\t \t  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} 
 
\t \t } 
 

 
\t </style> 
 

 

 
<g> 
 
\t <g> 
 
\t \t <g> 
 
\t \t \t <g> 
 
\t \t \t \t <path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827 
 
\t \t \t \t \t c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123 
 
\t \t \t \t \t C205.399,185.767,241.826,72.295,402.577,58.794z"/> 
 
\t \t \t \t <path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262 
 
\t \t \t \t \t c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271 
 
\t \t \t \t \t C284.65,91.009,324.625,117.573,400.396,115.509"/> 
 
\t \t \t \t <path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609 
 
\t \t \t \t \t c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/> 
 
\t \t \t \t <path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393 
 
\t \t \t \t \t c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799 
 
\t \t \t \t \t s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/> 
 
\t \t \t \t <path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898 
 
\t \t \t \t \t c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462 
 
\t \t \t \t \t c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/> 
 
\t \t \t \t <path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958 
 
\t \t \t \t \t c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/> 
 
\t \t \t </g> 
 
\t \t \t <path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973 
 
\t \t \t \t c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351 
 
\t \t \t \t s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365 
 
\t \t \t \t s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377 
 
\t \t \t \t c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/> 
 
\t \t \t <path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88 
 
\t \t \t \t C440.746,252.962,436.484,220.091,411.361,236.933z"/> 
 
\t \t </g> 
 
\t \t <g> 
 
\t \t \t <path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566 
 
\t \t \t \t c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/> 
 
\t \t \t <path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629 
 
\t \t \t \t c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/> 
 
\t \t \t <path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0 
 
\t \t \t \t l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/> 
 
\t \t </g> 
 
\t \t <path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438 
 
\t \t \t s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381 
 
\t \t \t c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/> 
 
\t </g> 
 
\t <path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/> 
 
\t <path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/> 
 
</g> 
 
</svg>

Beispielcode hier: https://codepen.io/mrmagnus/pen/jmOVPq

Quelle

2017-04-12 Magnus Pääru

im Internet Explorer 11, es überhaupt nicht drehen. Weder in Edge 38 noch in – Tolokoban

IE unterstützt CSS-Transformationen auf SVG-Elementen nicht. –

Firefox hat das richtige Verhalten nach dem spec. Bei SVG-Elementen bedeutet "transform-origin: center" den Mittelpunkt des SVG. Chrome hat eine ältere Version der Spezifikation implementiert und ist nun technisch falsch.

In Zukunft können Sie das Feld zur Berechnung der Prozentwerte (Mitte = 50%) des Ursprungs mit der Eigenschaft transform-box festlegen.

Bis zu dem Zeitpunkt, wenn Sie die Kompatibilität zwischen Browsern möchten, müssen Sie absolute Koordinaten verwenden.

transform-origin: 421px 250px;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666" 
 
\t xml:space="preserve"> 
 

 
\t <style> 
 

 
\t \t #coffeeFlower { 
 
\t \t \t -webkit-animation-name: coffeeFlower-animation; 
 
\t \t \t   animation-name: coffeeFlower-animation; 
 
\t  \t -webkit-animation-duration: 20s; 
 
\t  \t   animation-duration: 20s; 
 
\t  \t -webkit-animation-iteration-count: infinite; 
 
\t  \t   animation-iteration-count: infinite; 
 
\t  \t -webkit-transform-origin: 421px 250px; 
 
\t  \t  -ms-transform-origin: 421px 250px; 
 
\t  \t   transform-origin: 421px 250px; 
 
\t  \t -webkit-animation-timing-function: linear; 
 
\t  \t   animation-timing-function: linear; 
 
\t \t } 
 

 
\t \t @-webkit-keyframes coffeeFlower-animation { 
 
\t \t  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 
 
\t \t  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} 
 
\t \t } 
 

 
\t \t @keyframes coffeeFlower-animation { 
 
\t \t  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 
 
\t \t  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} 
 
\t \t } 
 

 
\t </style> 
 

 

 
<g> 
 
\t <g> 
 
\t \t <g> 
 
\t \t \t <g> 
 
\t \t \t \t <path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827 
 
\t \t \t \t \t c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123 
 
\t \t \t \t \t C205.399,185.767,241.826,72.295,402.577,58.794z"/> 
 
\t \t \t \t <path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262 
 
\t \t \t \t \t c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271 
 
\t \t \t \t \t C284.65,91.009,324.625,117.573,400.396,115.509"/> 
 
\t \t \t \t <path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609 
 
\t \t \t \t \t c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/> 
 
\t \t \t \t <path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393 
 
\t \t \t \t \t c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799 
 
\t \t \t \t \t s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/> 
 
\t \t \t \t <path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898 
 
\t \t \t \t \t c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462 
 
\t \t \t \t \t c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/> 
 
\t \t \t \t <path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958 
 
\t \t \t \t \t c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/> 
 
\t \t \t </g> 
 
\t \t \t <path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973 
 
\t \t \t \t c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351 
 
\t \t \t \t s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365 
 
\t \t \t \t s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377 
 
\t \t \t \t c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/> 
 
\t \t \t <path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88 
 
\t \t \t \t C440.746,252.962,436.484,220.091,411.361,236.933z"/> 
 
\t \t </g> 
 
\t \t <g> 
 
\t \t \t <path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566 
 
\t \t \t \t c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/> 
 
\t \t \t <path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629 
 
\t \t \t \t c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/> 
 
\t \t \t <path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0 
 
\t \t \t \t l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/> 
 
\t \t </g> 
 
\t \t <path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438 
 
\t \t \t s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381 
 
\t \t \t c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/> 
 
\t </g> 
 
\t <path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/> 
 
\t <path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/> 
 
</g> 
 
</svg>

Quelle

2017-04-12 15:15:41

Das Problem ist, dass Google Chrome eine bugguy Interpretation des CSS-Style transform-origin: center hat.

Aber Sie können auf beiden Browsern loswerden es und haben das gleiche Verhalten mit dieser Technik erhalten:

<g transform="translate(411,250)"> 
    <g id="coffeeFlower"> 
     <path transform="translate(-420,-250)" 
      d="...your yellow flower..."/> 
    </g> 
    </g>

Die Rotation immer auf (0,0) berechnet wird, aber Sie verwenden den Trick des Doppel Übersetzung.

Sie müssen nur die Übersetzungen feinabstimmen und es wird wie ein Zauber wirken (wie Sie sagen).

Sehen sie in Aktion: https://jsfiddle.net/hvngvz3y/2/

Quelle

2017-04-12 15:38:03 Tolokoban

Wie wählen Sie diese übersetzen Koordinaten? ' ' –

Ich schaute grob auf die 'coffeeFlower' Koordinaten und versuchte, das Zentrum zu erraten. – Tolokoban

SVG und FIREFOX und transformieren Herkunft, warum nicht funktioniert?

Antwort

Verwandte Themen