css – transform-origin在Firefox中甚至不在百分比值的属性中工作

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;

但是直到所有浏览器都正确支持转换框.

css – transform-origin在Firefox中甚至不在百分比值的属性中工作

解决方法

猜你在找的CSS相关文章