CSS3 transform-origin无法在firefox浏览器中运行.
我正在尝试运行transform:rotate(360deg);在@keyframes中< g class =“tire”>作为< svg class ='truck'>的孩子.在结果中,卡车车轮旋转适用于除铬之外的所有其他浏览器
Stack Overflow中也存在类似的问题,但遗憾的是,这些问题都与问题无关.
.tyre{ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: rotate(0); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
<svg class='truck' viewBox='0 0 93 53' xmlns='http://www.w3.org/2000/svg' height="180"> <g class='chase' fill-rule='evenodd' fill='none'> <path d='M32.087 35.263h3.023V5.973h-3.023v29.29z' fill='#EE7C00'></path> <path d='M87.84 35.262H5.007v4.065L9.07 43.39h74.707l4.062-4.063v-4.065z' fill='#9B9B9B'></path> <path d='M35.11 35.262h57.445v-3.966H35.11v3.966z' fill='#F09E00'></path> <path d='M90.393 35.262h2.16v-3.966h-2.16v3.966z' fill='#E2000F'></path> <path d='M17.498.493L2.91 15.08v20.182h29.175V.492H17.498z' fill='#FCC400'></path> <path d='M29.495 2.905H18.16L6.823 14.24h22.67V2.905z' fill='#575656'></path> <path d='M0 35.262h10.014v-3.966H0v3.966z' fill='#F09E00'></path> <path d='M5.008 37.294h82.83v-2.032H5.01v2.032z' fill='#575656'></path> <path d='M.75 29.858h2.16v-6.995H.75v6.995zM11.015 20.074h3.497v-2.16h-3.497v2.16z' fill='#E2000F'></path> <path d='M28.447 35.262h1.05V14.24h-1.05v21.022z' fill='#EE7C00'></path> <path d='M53.51 27.23h34.33v4.065H53.51V27.23z' fill='#575656'></path> </g> <g class='tyre'> <path d='M64.827 36.593a9.61 9.61 0 0 0 0 13.59c3.753 3.754 9.837 3.754 13.59 0a9.61 9.61 0 0 0-13.59-13.59' fill='#1A1A18'></path> <path d='M67.287 39.053a6.13 6.13 0 0 0 0 8.67 6.13 6.13 0 1 0 0-8.67' fill='#9B9B9B'></path> <path d='M67.287 39.053a6.133 6.133 0 0 0 0 8.67 6.134 6.134 0 0 0 8.67 0l-8.67-8.67z' fill='#C5C5C6'></path> <path d='M68.784 40.55a4.012 4.012 0 0 0 5.676 5.677 4.012 4.012 0 0 0-5.676-5.676' fill='#868685'></path> <path d='M65.526 37.293A8.62 8.62 0 1 1 77.72 49.486a8.62 8.62 0 0 1-12.192-12.193m-.385-.386c-3.578 3.578-3.578 9.384 0 12.963 3.58 3.58 9.385 3.58 12.964 0 3.578-3.58 3.578-9.385 0-12.963-3.58-3.58-9.386-3.58-12.964 0' fill='#3B3A39'></path> </g> <g class='tyre'> <path d='M13.038 36.593c-3.754 3.754-3.754 9.838 0 13.59a9.61 9.61 0 0 0 13.59 0c3.754-3.752 3.754-9.836 0-13.59a9.61 9.61 0 0 0-13.59 0' fill='#1A1A18'></path> <path d='M15.498 39.054a6.128 6.128 0 0 0 0 8.67 6.13 6.13 0 0 0 8.67 0 6.13 6.13 0 0 0-8.67-8.67' fill='#9B9B9B'></path> <path d='M15.498 39.054a6.13 6.13 0 1 0 8.67 8.67l-8.67-8.67z' fill='#C5C5C6'></path> <path d='M16.996 40.55a4.012 4.012 0 1 0 5.675 5.677 4.014 4.014 0 0 0-5.674-5.676' fill='#868685'></path> <path d='M13.737 37.293a8.622 8.622 0 0 1 12.192 0 8.622 8.622 0 0 1 0 12.192 8.622 8.622 0 0 1-12.193 0 8.622 8.622 0 0 1 0-12.192m-.385-.385a9.164 9.164 0 0 0 0 12.962c3.578 3.58 9.384 3.58 12.962 0a9.164 9.164 0 0 0 0-12.962 9.164 9.164 0 0 0-12.962 0' fill='#3B3A39'></path> </g> <g class='tyre'> <path d='M44.406 36.593c-3.753 3.754-3.753 9.838 0 13.59 3.754 3.755 9.838 3.755 13.59 0 3.755-3.752 3.755-9.836 0-13.59-3.752-3.753-9.836-3.753-13.59 0' fill='#1A1A18'></path> <path d='M46.868 39.054a6.128 6.128 0 0 0 0 8.67 6.128 6.128 0 0 0 8.67 0 6.128 6.128 0 0 0 0-8.67 6.13 6.13 0 0 0-8.67 0' fill='#9B9B9B'></path> <path d='M46.868 39.054a6.13 6.13 0 1 0 8.67 8.67l-8.67-8.67z' fill='#C5C5C6'></path> <path d='M48.364 40.55a4.014 4.014 0 1 0 0 0' fill='#868685'></path> <path d='M45.106 37.293a8.622 8.622 0 0 1 12.192 0 8.622 8.622 0 0 1 0 12.192 8.622 8.622 0 0 1-12.192 0 8.622 8.622 0 0 1 0-12.192m-.385-.385a9.164 9.164 0 0 0 0 12.962c3.58 3.58 9.385 3.58 12.963 0 3.58-3.578 3.58-9.384 0-12.962a9.164 9.164 0 0 0-12.962 0' fill='#3B3A39'></path> </g> </svg>
解决方法
总结一下你得到的评论:
>在SVG元素中具有百分比值的transform-origin属性已在Firefox中被破坏,并且刚刚被修复/实现.
> transform-origin的含义:应用于SVG元素时,50%50%直到最近才被完全指定. Chrome使用了元素边界框的中心. Firefox使用SVG的中心.
>最近只决定了如何计算百分比来源.有一个名为transform-box的新属性.见:https://drafts.csswg.org/css-transforms/#transform-box
SVG元素的transform-box的默认值是view-Box(通常是整个SVG的中心).但Chrome目前使用相当于的填充框.
总之,您不应该依赖Chrome的行为.它可能会更改以匹配新transform-box属性指定的内容.
如果您希望在两个浏览器上都使用SVG,请不要在transform-origin中使用百分比值.使用绝对坐标.见下面的例子.
.tyreA { -webkit-transform-origin: 71.59px 43.42px; -moz-transform-origin: 71.59px 43.42px; transform-origin: 71.59px 43.42px; transform: rotate(0); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .tyreB { -webkit-transform-origin: 19.83px 43.39px; -moz-transform-origin: 19.83px 43.39px; transform-origin: 19.83px 43.39px; transform: rotate(0); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .tyreC { -webkit-transform-origin: 51.2px 43.39px; -moz-transform-origin: 51.2px 43.39px; transform-origin: 51.2px 43.39px; transform: rotate(0); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
<svg class='truck' viewBox='0 0 93 53' xmlns='http://www.w3.org/2000/svg' height="180"> <g class='chase' fill-rule='evenodd' fill='none'> <path d='M32.087 35.263h3.023V5.973h-3.023v29.29z' fill='#EE7C00'></path> <path d='M87.84 35.262H5.007v4.065L9.07 43.39h74.707l4.062-4.063v-4.065z' fill='#9B9B9B'></path> <path d='M35.11 35.262h57.445v-3.966H35.11v3.966z' fill='#F09E00'></path> <path d='M90.393 35.262h2.16v-3.966h-2.16v3.966z' fill='#E2000F'></path> <path d='M17.498.493L2.91 15.08v20.182h29.175V.492H17.498z' fill='#FCC400'></path> <path d='M29.495 2.905H18.16L6.823 14.24h22.67V2.905z' fill='#575656'></path> <path d='M0 35.262h10.014v-3.966H0v3.966z' fill='#F09E00'></path> <path d='M5.008 37.294h82.83v-2.032H5.01v2.032z' fill='#575656'></path> <path d='M.75 29.858h2.16v-6.995H.75v6.995zM11.015 20.074h3.497v-2.16h-3.497v2.16z' fill='#E2000F'></path> <path d='M28.447 35.262h1.05V14.24h-1.05v21.022z' fill='#EE7C00'></path> <path d='M53.51 27.23h34.33v4.065H53.51V27.23z' fill='#575656'></path> </g> <g class='tyreA'> <path d='M64.827 36.593a9.61 9.61 0 0 0 0 13.59c3.753 3.754 9.837 3.754 13.59 0a9.61 9.61 0 0 0-13.59-13.59' fill='#1A1A18'></path> <path d='M67.287 39.053a6.13 6.13 0 0 0 0 8.67 6.13 6.13 0 1 0 0-8.67' fill='#9B9B9B'></path> <path d='M67.287 39.053a6.133 6.133 0 0 0 0 8.67 6.134 6.134 0 0 0 8.67 0l-8.67-8.67z' fill='#C5C5C6'></path> <path d='M68.784 40.55a4.012 4.012 0 0 0 5.676 5.677 4.012 4.012 0 0 0-5.676-5.676' fill='#868685'></path> <path d='M65.526 37.293A8.62 8.62 0 1 1 77.72 49.486a8.62 8.62 0 0 1-12.192-12.193m-.385-.386c-3.578 3.578-3.578 9.384 0 12.963 3.58 3.58 9.385 3.58 12.964 0 3.578-3.58 3.578-9.385 0-12.963-3.58-3.58-9.386-3.58-12.964 0' fill='#3B3A39'></path> </g> <g class='tyreB'> <path d='M13.038 36.593c-3.754 3.754-3.754 9.838 0 13.59a9.61 9.61 0 0 0 13.59 0c3.754-3.752 3.754-9.836 0-13.59a9.61 9.61 0 0 0-13.59 0' fill='#1A1A18'></path> <path d='M15.498 39.054a6.128 6.128 0 0 0 0 8.67 6.13 6.13 0 0 0 8.67 0 6.13 6.13 0 0 0-8.67-8.67' fill='#9B9B9B'></path> <path d='M15.498 39.054a6.13 6.13 0 1 0 8.67 8.67l-8.67-8.67z' fill='#C5C5C6'></path> <path d='M16.996 40.55a4.012 4.012 0 1 0 5.675 5.677 4.014 4.014 0 0 0-5.674-5.676' fill='#868685'></path> <path d='M13.737 37.293a8.622 8.622 0 0 1 12.192 0 8.622 8.622 0 0 1 0 12.192 8.622 8.622 0 0 1-12.193 0 8.622 8.622 0 0 1 0-12.192m-.385-.385a9.164 9.164 0 0 0 0 12.962c3.578 3.58 9.384 3.58 12.962 0a9.164 9.164 0 0 0 0-12.962 9.164 9.164 0 0 0-12.962 0' fill='#3B3A39'></path> </g> <g class='tyreC'> <path d='M44.406 36.593c-3.753 3.754-3.753 9.838 0 13.59 3.754 3.755 9.838 3.755 13.59 0 3.755-3.752 3.755-9.836 0-13.59-3.752-3.753-9.836-3.753-13.59 0' fill='#1A1A18'></path> <path d='M46.868 39.054a6.128 6.128 0 0 0 0 8.67 6.128 6.128 0 0 0 8.67 0 6.128 6.128 0 0 0 0-8.67 6.13 6.13 0 0 0-8.67 0' fill='#9B9B9B'></path> <path d='M46.868 39.054a6.13 6.13 0 1 0 8.67 8.67l-8.67-8.67z' fill='#C5C5C6'></path> <path d='M48.364 40.55a4.014 4.014 0 1 0 0 0' fill='#868685'></path> <path d='M45.106 37.293a8.622 8.622 0 0 1 12.192 0 8.622 8.622 0 0 1 0 12.192 8.622 8.622 0 0 1-12.192 0 8.622 8.622 0 0 1 0-12.192m-.385-.385a9.164 9.164 0 0 0 0 12.962c3.58 3.58 9.385 3.58 12.963 0 3.58-3.578 3.58-9.384 0-12.962a9.164 9.164 0 0 0-12.962 0' fill='#3B3A39'></path> </g> </svg>
将来,您将能够:
transform-origin: 50% 50%; transform-Box: fill-Box;
但是直到所有浏览器都正确支持转换框.