How to Use Transform-Origin in Conjunction with Svgs

How to use transform-origin in conjunction with SVGs?

You've assumed the transform box is the fill box, but it isn't by default, it's the view box. You can fix that with transform-box

a {

    width: 40px;

    height: 40px;

    width: 40px;

    font-size: 1.5rem;

    padding: 1px;

    overflow: hidden;

    border: 1px solid black;  

}

a:hover path {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);    

}

a path {

    transition: all .5s ease-in-out;

    transform-origin: center center;

    transform-box: fill-box;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<a href="#" class="rounded-circle" data-toggle="tooltip" data-placement="left" title="Twitter" aria-label="Twitter">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-250 -150 1000 1000" height="40px" width="40px">

        <path fill="#007bff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>

    </svg>

</a>

CSS transform origin issue on svg sub-element

You need transform-box: fill-box;

@keyframes scaleBox {

  from {transform: scale(0);}

  to {transform: scale(1);}

  }

  #animated-box {

    transform-box: fill-box;

   animation: scaleBox 2s infinite;

  }

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="

        width: 195px;

    "><defs>

    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>

    </defs>

    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>

    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>

    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>

SVG not rotating correctly with css

You'll have to find the sweet spot for your transform-origin because of your image, see below. Also unless the rotating image is symmetrical you'll always get that little wobble you see in the example so might want to tweak that also. Cheers.

.svg {
  height: 400px;
  width: 400px;
}

#outer-1 {        
    -webkit-transform-origin: center center;
    animation-name:rotate;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 210px 203px;
}

@keyframes rotate {
   to {
       -webkit-transform:rotate(360deg) translateZ(0px);
   }
}

<div class="svg">
    <svg viewBox="0 0 816 845" fill="none">
    <g id="Layer 2">
    <g id="Layer 1">
    <path id="outer-2" d="M458.855 639.621C458.856 630.178 462.475 621.074 469.008 614.076C475.541 607.078 484.522 602.687 494.205 601.756C488.616 573.484 476.953 546.671 459.975 523.064C452.496 529.175 442.934 532.355 433.164 531.979C423.394 531.603 414.121 527.699 407.164 521.033C400.206 514.366 396.066 505.418 395.555 495.943C395.044 486.468 398.198 477.15 404.4 469.815C379.843 453.663 352.063 442.699 322.859 437.631C322.024 447.082 317.582 455.889 310.404 462.327C303.225 468.764 293.828 472.369 284.054 472.433C274.28 472.498 264.833 469.018 257.565 462.676C250.297 456.334 245.731 447.586 244.764 438.148C215.629 443.571 187.998 454.889 163.671 471.364C169.968 478.622 173.244 487.901 172.857 497.382C172.47 506.862 168.447 515.86 161.577 522.612C154.707 529.363 145.486 533.381 135.722 533.877C125.958 534.373 116.355 531.312 108.796 525.293C92.1522 549.124 80.8531 576.082 75.6307 604.42C85.3695 605.231 94.4454 609.541 101.08 616.507C107.714 623.473 111.428 632.592 111.495 642.077C111.562 651.561 107.976 660.729 101.44 667.782C94.9039 674.834 85.8895 679.265 76.163 680.204C81.7519 708.476 93.4151 735.289 110.393 758.896C117.872 752.785 127.434 749.606 137.204 749.981C146.974 750.357 156.247 754.261 163.204 760.927C170.162 767.594 174.302 776.542 174.813 786.017C175.324 795.492 172.17 804.811 165.967 812.145C190.525 828.297 218.305 839.261 247.509 844.329C248.344 834.879 252.786 826.071 259.964 819.634C267.143 813.196 276.54 809.591 286.314 809.527C296.088 809.462 305.535 812.942 312.803 819.284C320.071 825.626 324.637 834.374 325.604 843.813C354.788 838.407 382.468 827.089 406.837 810.596C400.54 803.338 397.264 794.059 397.651 784.578C398.038 775.098 402.061 766.1 408.931 759.348C415.801 752.597 425.022 748.579 434.786 748.083C444.55 747.587 454.153 750.648 461.712 756.667C478.356 732.836 489.655 705.878 494.877 677.54C485.064 676.762 475.911 672.43 469.237 665.405C462.563 658.38 458.857 649.176 458.855 639.621V639.621ZM285.184 770.095C258.868 770.095 233.144 762.522 211.263 748.335C189.382 734.148 172.329 713.983 162.258 690.39C152.187 666.797 149.553 640.837 154.686 615.791C159.82 590.745 172.493 567.739 191.101 549.682C209.708 531.625 233.416 519.328 259.226 514.346C285.036 509.364 311.789 511.921 336.102 521.694C360.414 531.466 381.194 548.015 395.814 569.248C410.435 590.481 418.238 615.444 418.238 640.98C418.238 675.223 404.22 708.064 379.267 732.278C354.315 756.492 320.472 770.095 285.184 770.095Z" fill="black"/>
    <path id="inner-2" d="M285.184 693.985C315.351 693.985 339.806 670.254 339.806 640.98C339.806 611.706 315.351 587.975 285.184 587.975C255.017 587.975 230.562 611.706 230.562 640.98C230.562 670.254 255.017 693.985 285.184 693.985Z" fill="black"/>
    <path id="outer-1" d="M383.224 201.99C383.225 192.547 386.844 183.443 393.377 176.445C399.91 169.447 408.891 165.056 418.574 164.125C412.985 135.853 401.322 109.04 384.344 85.4332C376.865 91.5442 367.303 94.7235 357.533 94.3477C347.763 93.9718 338.49 90.068 331.533 83.4016C324.575 76.7352 320.435 67.7872 319.924 58.3121C319.413 48.8371 322.568 39.5184 328.77 32.1836C304.212 16.0324 276.432 5.06771 247.229 0C246.392 9.52205 241.893 18.3899 234.628 24.8412C227.362 31.2925 217.861 34.8548 208.013 34.8202C198.306 34.7853 188.958 31.2586 181.776 24.9221C174.594 18.5856 170.09 9.88971 169.133 0.516459C139.998 5.93997 112.367 17.2578 88.0398 33.7329C94.3373 40.9909 97.6136 50.27 97.2263 59.7506C96.839 69.2311 92.816 78.2294 85.9462 84.9808C79.0764 91.7323 69.8554 95.7499 60.0913 96.246C50.3271 96.742 40.7242 93.6806 33.1655 87.6621C16.5215 111.493 5.22233 138.451 0 166.789C9.81258 167.601 18.951 171.967 25.5991 179.017C32.2472 186.068 35.9182 195.287 35.8826 204.844C35.8467 214.263 32.2123 223.334 25.6825 230.304C19.1527 237.273 10.1915 241.644 0.532217 242.573C6.10243 270.892 17.7663 297.753 34.7621 321.401C42.2416 315.29 51.8037 312.11 61.5736 312.486C71.3434 312.862 80.6162 316.766 87.5737 323.432C94.5311 330.099 98.6713 339.047 99.1825 348.522C99.6937 357.997 96.5389 367.315 90.3368 374.65C114.894 390.801 142.675 401.766 171.878 406.834C172.713 397.383 177.155 388.576 184.333 382.138C191.512 375.701 200.909 372.096 210.683 372.031C220.458 371.967 229.904 375.447 237.173 381.789C244.441 388.131 249.006 396.879 249.974 406.317C279.157 400.912 306.838 389.593 331.207 373.101C324.909 365.843 321.633 356.564 322.02 347.083C322.408 337.603 326.431 328.604 333.3 321.853C340.17 315.102 349.391 311.084 359.155 310.588C368.92 310.092 378.522 313.153 386.081 319.172C402.725 295.341 414.024 268.383 419.247 240.045C409.409 239.265 400.236 234.914 393.559 227.86C386.882 220.806 383.191 211.568 383.224 201.99V201.99ZM209.553 332.464C183.238 332.464 157.513 324.891 135.632 310.704C113.752 296.517 96.6978 276.352 86.6273 252.759C76.5567 229.166 73.9218 203.206 79.0557 178.16C84.1897 153.114 96.8618 130.108 115.47 112.051C134.078 93.994 157.786 81.697 183.596 76.7151C209.406 71.7332 236.158 74.2901 260.471 84.0625C284.783 93.8349 305.564 110.384 320.184 131.617C334.804 152.849 342.607 177.812 342.607 203.349C342.607 237.592 328.589 270.433 303.637 294.647C278.684 318.861 244.841 332.464 209.553 332.464Z" fill="black"/>
    <path id="inner-1" d="M209.553 256.354C239.72 256.354 264.175 232.623 264.175 203.349C264.175 174.075 239.72 150.344 209.553 150.344C179.386 150.344 154.931 174.075 154.931 203.349C154.931 232.623 179.386 256.354 209.553 256.354Z" fill="black"/>
    <path id="rotator" d="M804.431 331.839L754.263 323.249C749.886 300.159 740.594 278.208 726.98 258.8L757.12 219.468C759.125 216.849 760.093 213.618 759.846 210.364C759.599 207.11 758.154 204.051 755.775 201.745L740.957 187.366C738.628 185.102 735.55 183.708 732.266 183.43C728.981 183.151 725.701 184.006 723.002 185.844L681.265 214.195C661.348 200.869 638.785 191.722 615.018 187.339L607.679 138.873C607.195 135.645 605.531 132.694 602.991 130.558C600.45 128.422 597.203 127.244 593.842 127.239H572.889C569.594 127.235 566.403 128.359 563.877 130.412C561.352 132.465 559.653 135.317 559.079 138.465L550.228 187.149C526.433 191.396 503.813 200.413 483.813 213.624L443.252 184.376C440.554 182.43 437.224 181.491 433.87 181.731C430.517 181.97 427.365 183.372 424.989 185.681L410.171 200.06C407.838 202.321 406.402 205.307 406.115 208.494C405.828 211.682 406.709 214.865 408.602 217.484L437.818 257.985C424.086 277.312 414.66 299.207 410.143 322.27L360.199 329.392C356.868 329.863 353.822 331.481 351.621 333.952C349.419 336.423 348.208 339.581 348.21 342.847V363.179C348.206 366.377 349.363 369.473 351.479 371.924C353.595 374.375 356.534 376.024 359.778 376.58L409.947 385.17C414.324 408.26 423.616 430.21 437.23 449.618L407.09 488.951C405.084 491.57 404.117 494.801 404.364 498.055C404.61 501.309 406.055 504.368 408.434 506.674L423.252 521.053C425.582 523.317 428.66 524.711 431.944 524.989C435.228 525.267 438.509 524.413 441.207 522.575L482.944 494.224C502.862 507.55 525.425 516.696 549.191 521.08L556.53 569.546C557.015 572.778 558.683 575.733 561.23 577.869C563.776 580.006 567.03 581.181 570.396 581.18H591.349C594.644 581.184 597.834 580.06 600.36 578.007C602.886 575.954 604.585 573.102 605.158 569.953L614.01 521.27C637.811 516.998 660.432 507.953 680.425 494.713L720.957 523.961C723.656 525.907 726.986 526.846 730.339 526.607C733.692 526.367 736.845 524.965 739.221 522.657L754.039 508.277C756.372 506.017 757.808 503.03 758.095 499.843C758.382 496.656 757.501 493.472 755.607 490.854L726.392 450.352C740.124 431.025 749.55 409.13 754.067 386.067L803.927 379.027C807.258 378.556 810.303 376.937 812.505 374.467C814.706 371.996 815.917 368.838 815.916 365.572V345.212C815.917 342.031 814.768 338.951 812.67 336.507C810.571 334.063 807.656 332.411 804.431 331.839V331.839ZM582.105 454.783C561.606 454.783 541.568 448.884 524.524 437.833C507.48 426.782 494.196 411.075 486.352 392.697C478.508 374.32 476.455 354.098 480.454 334.588C484.453 315.079 494.324 297.159 508.819 283.093C523.313 269.028 541.781 259.449 561.885 255.568C581.99 251.688 602.829 253.679 621.767 261.292C640.705 268.904 656.892 281.794 668.28 298.334C679.668 314.873 685.747 334.318 685.747 354.209C685.747 380.883 674.828 406.464 655.391 425.326C635.954 444.187 609.592 454.783 582.105 454.783V454.783Z" fill="black"/>
    </g>
    </g>
    </svg>
</div>

SVG transform-origin broken in Inkscape

You are using transform and transform-origin as defined in the CSS Transforms Level 1 Candidate Recommendation, and you are using them as presentation attributes. transform-origin as a presentation attribute was only introduced in the 2017 working draft. While browser vendors have the capacity to bring up their products to new spec standards even before they reach recommendation status, most open source projects have not. For Inkscape, you have to live with the implementation according to the SVG 1.1 attribute standard, which is incompatible to CSS.

But that is not really a problem in your case. You only use transform-origin in conjunction with the rotate() function. And for that there is a helpful difference between the SVG attribute syntax and the CSS property functional notation: you can define the center of rotation inside the function. (This syntax only exists for rotate(), but not for scale(), skewX() or skewY().)

A CSS rule (note the obligatory units) of

style="transform:rotate(51deg);transform-origin:113.38582677299999px 113.38582677299999px;"

can be written as a SVG attribute

transform="rotate(51 113.38582677299999 113.38582677299999)"

But take care that

• this second form cannot be used as a CSS property, and
• all numbers must be unitless and expressed in the current user coordinate system of the parent.

The second condition means you cannot use mm units, but need to recompute them to px units.

SVG. Reverse image using css. Keep image at the same place

Use transform-origin and transform-box

$(".example").on("click", function(e){

  $(e.target).toggleClass("reverse");

})

.reverse{

    transform: scaleX(-1);

    transform-origin: center;

    transform-box: fill-box;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 700px;height: 700px;margin-left: 100px">

    <svg viewBox="-200 0 700 700">

        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/>

        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/>

      <!--x value can be changed during time-->

    </svg>

</div>

Use SVG animateTransform to rotate a path within a translated SVG within a SVG

What sticks out in your code is the lack of a value for begin in your <animateTransform>. begin values are pretty versatile.

• You can set them to "0s", which is the default, and coincides with the time the document timeline begins (basically the window load event). It is not the time when you later interactively add the tag. At that time, 0s will have passed.

• You can set them to "indefinite", so the animation does not start. This is usually used in conjunction with a script-based trigger, for example SVGAnimationElement.beginElement().

• You can set them to an arbitrary event. "myButton.click" will start the animation when the element with id="myButton" receives a click.

The syntax also provides for start time lists and delays. It is well worth studying the syntax in the spec to find out what you can do. (The only part of the time value spec not implemented by browsers is the wallclock() function.)

For the rotation center, you need to look closely at what you transform, and what you rotate. As your code stands, the <animateTransform> replaces the transform attribute on your element in its entirety. What you probably want is a supplemental transformation that is added to the end of the existing transform list. This is steered by the attribute additive="sum" (default is "replace").

        <path style="stroke:none;fill:black" transform="translate(30.333,30.333) rotate(45)"
              d="M 0 0 L 0 -30.333 L -30.333 0 L -15.166 0 L -15.166 30.333 L 15.166
                 30.333 L 15.166 0 L 30.333 0 L 0 -30.333 Z "
              id="arrow-3,3">
          <animateTransform attributeName="transform" type="rotate"
                            from="0"
                            to="180"
                            begin="myButton.click" dur="1s" repeatCount="100"
                            additive="sum">
          </animateTransform>
        </path>

This will rotate the element around the (0, 0) point in local userspace coordinates, 100 times in a row, from 0 to 180 degrees. Three things to look carefully into:

1. The center of rotation must be set in local userspace coordinates, after the application of all previous transforms, as it is added to the end of the transform list. (Transformations of coordinate systems, not of objects drawn into them.) Wht this amounts to is: it is the same coordinate system as the one used by the path data. The center of that path is at the coordinate system origin.

2. The transformation adds to the underlying element transform. This means, it does not replace the initial 45deg rotation, but adds to it. Therefore it is generally a good idea to start additive transforms with an identity transform.

3. As you defined, the rotation goes from 0 to 180 degrees, and then immediately restarts. This means it will jump back to its initial position without delay. If you want a smooth movement, either rotate from 0 to 360 degrees, or set the attribute accumulate="sum", which will start the next iteration at the end of the previous one.

---

Related Topics