JSFiddle - React, Tailwind, and code Playground

HTML

<section id="pct">
    <h2>transform-box + %</h2>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200" width="400">
        <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.4c-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.8c1.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.9c1.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>
</section>

<section id="px">
    <h2>transform-box + px</h2>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200" width="400">
        <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.4c-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.8c1.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.9c1.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>
</section>

<a href="https://stackoverflow.com/questions/47397183/how-to-set-the-transform-origin-to-a-specific-point-on-the-element">https://stackoverflow.com/questions/47397183/how-to-set-the-transform-origin-to-a-specific-point-on-the-element</a>

CSS

section { display: inline-block; }

.hammer-icon {
    transform-box: fill-box;
    transition: transform .3s ease-out;
}
.hammer:hover .hammer-icon {
    transform: rotate(45deg);
}

#pct .hammer-icon {
    transform-origin: 15% 80%;
}
#px .hammer-icon {
    transform-origin: 20px 85px;
}