transform-origin在Firefox中甚至不能在百分比值中使用属性

Question

CSS3 transform-origin无法在firefox浏览器中运行。

我正试图在transform: rotate(360deg); @keyframes中<g class="tyre">作为<svg class='truck'>的孩子运行.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); } }。在结果中，卡车车轮旋转适用于除 chrome

之外的所有其他浏览器

Stack Overflow中存在类似的问题，遗憾的是，这些问题都与问题无关。

<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>

@foreach($Names as $key => $val)&&
    <td> {{$val}}</td>
    <td> {{$users[$key]}}  </td>
@endforeach

Answer 1

总结您所获得的评论：

1. 在Firefox中已经破坏了SVG元素上具有百分比值的transform-origin属性，并且刚刚修复/实现。

2. 应用于SVG元素时transform-origin: 50% 50%的含义直到最近才被完全指定。 Chrome使用了元素的边界框的中心。 Firefox使用SVG的中心。

3. 最近才决定如何计算原产地百分比。有一个名为transform-box的新属性。请参阅：https://drafts.csswg.org/css-transforms/#transform-box

SVG元素的默认值transform-box为view-box（通常是整个SVG的中心）。但Chrome目前使用的是fill-box。

总之，您不应该依赖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;

但是直到所有浏览器都支持transform-box才会这样做。

Answer 2

我最近遇到了同样的问题。 车轮围绕整个推车而不是绕其轴线转动。在所有浏览器中，transform-origin属性都有帮助。

transform-origin: 50% 50% 0px;

但不是在Mozilla。 对于Mozilla，我使用了像素的静态值。

-moz-transform-origin: 136px 110px 0px;

My codepen example

Answer 3

您可以使用此功能节省一些时间来计算这些静态位置。只需传递 x ， y 百分比值，选择器并在浏览器控制台中执行：

;(function getStaticCoords(x, y, elementId) {
  var coord = $(elementId)[0].getBBox()
  var coordW = coord.width * x / 100
  var coordH = coord.height * y / 100
  return coord.x + coordW + 'px ' + (coord.y + coordH / 2 + 'px')
})(50, 50, '#myDOMElement')