如何将变换原点设置为元素上的特定点? [英] How to set the transform origin to a specific point on the element?

问题描述

在此示例中，我想从锤子的底部旋转锤子，因此有没有办法确切知道元素上特定点的正确坐标，还是我应该随机尝试其他点?

In this example I want to rotate the hammer from its bottom so is there a way to know exactly the right coordinates of a specific point on the element or should I randomly try different points?

svg {
  width: 50%;
}

.hammer-icon {
  transform-origin: 200px 50px;
  transition: transform .3s ease-out;
}

.hammer:hover .hammer-icon {
  transform: rotate(45deg);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200">
  <g class="hammer">
    <circle class="hammer-bg" fill="#FFD466" cx="200" cy="50" r="90"></circle>
    <path class="hammer-icon" fill="#FFFFFF" d="M262,32.9l-6.7-6.9c-1.4-1.4-3.6-1.4-5-0.1l-2.8,2.8l-14.6-15c-7-7.2-20.3-18.5-30.1-16.4
      c-1.6,0.3-5.6,3.1-5.6,3.1l19,19.5l-26.3,25.6l-1.5-1.6c-1.4-1.4-3.6-1.4-5-0.1l-39.3,38.3c-1.4,1.4-1.4,3.6-0.1,5l14.4,14.8
      c1.4,1.4,3.6,1.4,5,0.1l39.3-38.3c1.4-1.4,1.4-3.6,0.1-5l-1.5-1.6l26.3-25.6l8.3,8.5l-2.8,2.8c-1.4,1.4-1.4,3.6-0.1,5l6.7,6.9
      c1.4,1.4,3.6,1.4,5,0.1l17.3-16.9C263.3,36.5,263.4,34.3,262,32.9z"></path>
  </g>
</svg>

推荐答案

要使transform-origin点相对于元素，您需要使用

To make the transform-origin point relative to the element, you need to use transform-box: fill-box;.

Chrome浏览器尚不支持该属性( CSS转换框-Chrome平台状态)，但幸运的是(但错误地)如果您使用百分比而不是像素，Chrome会相对于元素设置transform-origin(

Chrome doesn't support that property yet (CSS transform-box - Chrome Platform Status), but luckily (yet wrongfully) Chrome sets the transform-origin relative to the element if you use percentages instead of pixels (https://css-tricks.com/transforms-on-svg-elements/).

因此，要使某些东西能够在大多数*)现代浏览器上运行，请使用transform-box: fill-box;和transform-origin: xx% yy%;

So, to make something that works on most *) modern browsers, use transform-box: fill-box; and transform-origin: xx% yy%;

.hammer-icon {
    transform-origin: 15% 80%;
    transform-box: fill-box;
    ...
}

https://jsfiddle.net/L1790vzo/8

*) IE/Edge根本不支持对SVG元素进行CSS转换.
*) Chrome v64和Opera v51中的正确支持

*) IE/Edge doesn't support CSS transforms on SVG elements at all.
*) Proper support in Chrome v64 and Opera v51

这篇关于如何将变换原点设置为元素上的特定点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！