0

I'm trying for the first time to animate an illustration made in svg using css and I have a problem that I don't know how to solve.

When I try to apply the css transform property to a path, specifically to the lower arm (Shape-33), this path disappears. What I don't quite understand and I'm surely missing something is that if I apply this transform property to the parent svg tag , it does apply.

Does anyone know what I'm doing wrong?

Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <title>Ilustration</title>
    <style>
      #Shape-33{ transform: rotate(-13deg);}
    </style>
</head>
<body>

    

    <svg xmlns="http://www.w3.org/2000/svg" width="1074.145" height="883.935" viewBox="0 0 1074.145 883.935">
        <g id="Grupo_1480" data-name="Grupo 1480" transform="translate(-323.234 -966.369)">
          
          <path id="Shape" d="M2509.73,516.99a17.944,17.944,0,1,0,17.944-17.943,17.943,17.943,0,0,0-17.944,17.943" transform="translate(-1856.566 929.905)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-2" data-name="Shape" d="M2555.161,464.243A17.945,17.945,0,1,0,2573.1,446.3a17.944,17.944,0,0,0-17.944,17.944" transform="translate(-1856.415 929.73)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-3" data-name="Shape" d="M2467.631,464.243a17.944,17.944,0,1,0,17.944-17.944,17.943,17.943,0,0,0-17.944,17.944" transform="translate(-1856.706 929.73)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-4" data-name="Shape" d="M2638.783,692.988c-5.5-4.194-32.286-11.089-79.558-11.089s-74.055,6.895-79.561,11.089c5.5,4.2,32.289,11.09,79.561,11.09s74.055-6.894,79.558-11.09m-79.558,21.694c-23.164,0-44.991-1.737-61.46-4.9-20.3-3.89-29.348-9.071-29.348-16.8s9.05-12.9,29.346-16.8c16.471-3.156,38.3-4.893,61.462-4.893s44.991,1.738,61.464,4.893c20.294,3.894,29.344,9.072,29.344,16.8s-9.05,12.909-29.346,16.8c-16.471,3.158-38.3,4.9-61.462,4.9" transform="translate(-1856.704 930.479)" fill="#a55c72" fill-rule="evenodd"/>
          <path id="Shape-5" data-name="Shape" d="M2455.335,877.068c-.144-.01-.294-.018-.437-.03a7.424,7.424,0,0,1-6.727-8.061l36.444-404.2a7.423,7.423,0,1,1,14.787,1.332l-36.444,404.2a7.433,7.433,0,0,1-7.624,6.757" transform="translate(-1856.771 929.769)" fill="#a55c72" fill-rule="evenodd"/>
          <path id="Shape-6" data-name="Shape" d="M2540.522,798.807l5.119,76.886h22.3l3.6-76.886Z" transform="translate(-1856.463 930.904)" fill="#f7c7b5" fill-rule="evenodd"/>
          <path id="Shape-7" data-name="Shape" d="M2664.381,877.543a7.425,7.425,0,0,1-7.383-6.728l-38-405.148a7.423,7.423,0,1,1,14.781-1.388l38,405.148a7.418,7.418,0,0,1-6.694,8.083c-.235.023-.469.033-.7.033" transform="translate(-1856.202 929.767)" fill="#a55c72" fill-rule="evenodd"/>
          <path id="Shape-8" data-name="Shape" d="M2454.607,463.464c0-18.211,45.6-32.974,101.844-32.974s101.839,14.762,101.839,32.974-45.59,32.975-101.839,32.975-101.844-14.762-101.844-32.975" transform="translate(-1856.75 929.677)" fill="#a55c72" fill-rule="evenodd"/>
          <path id="Shape-9" data-name="Shape" d="M2644.186,678.2,2690.8,647l-22.072-25.055L2632.7,662.413Z" transform="translate(-1856.156 930.315)" fill="#f7c7b5" fill-rule="evenodd"/>
          <path id="Shape-10" data-name="Shape" d="M2545.625,875.438c2.059,16.136,11.35,33.023,28.465,41.876,2.9,1.5,6.858,2.719,9.547.966,7.264-4.731-13.46-37.321-15.715-42.842Z" transform="translate(-1856.447 931.159)" fill="#353d59" fill-rule="evenodd"/>
          <path id="Shape-11" data-name="Shape" d="M2632.733,662.278c-4.875,2.1-9.5,5.046-8.644,10.838,4.4,29.827,31.464,54,37.36,49.8s-15.227-38.163-17.234-44.852l-11.482-15.786" transform="translate(-1856.186 930.449)" fill="#353d59" fill-rule="evenodd"/>
          <path id="Shape-12" data-name="Shape" d="M2433.54,393.177c3.2,103.12,65.252,178.737,87.916,287.977,5.042,24.3,11.961,114.071,15.709,166.553H2582.3s19.391-126.043,16.24-171.815c-5.388-78.253-29.254-211.807-29.254-211.807s106.341,43.984,159.757,71.584c-27.957,37.686-51.519,72.513-77.885,107.57l37.321,35.77c35.792-28.123,121.338-85.394,133.621-130.215,26.844-97.987-161.071-156.206-199.19-170.2L2433.54,393.177" transform="translate(-1856.82 929.504)" fill="#0f206c" fill-rule="evenodd"/>
          <path id="Shape-13" data-name="Shape" d="M2440.467,435a2.12,2.12,0,0,1-.09-4.238c19.328-.834,38.009-13.89,45.427-31.752a2.122,2.122,0,1,1,3.919,1.627,56.776,56.776,0,0,1-49.164,34.361c-.03,0-.061,0-.092,0" transform="translate(-1856.804 929.568)" fill="#161721" fill-rule="evenodd"/>
          <path id="Shape-14" data-name="Shape" d="M2596.815,445.335a2.118,2.118,0,0,1-2.106-1.884,133.823,133.823,0,0,0-14.216-46.789,2.12,2.12,0,1,1,3.764-1.951,137.96,137.96,0,0,1,14.666,48.268,2.117,2.117,0,0,1-1.869,2.344,2.392,2.392,0,0,1-.239.012" transform="translate(-1856.331 929.554)" fill="#161721" fill-rule="evenodd"/>
          <path id="Shape-15" data-name="Shape" d="M2581.877,453.751a2.122,2.122,0,0,1-2.1-1.839,113.829,113.829,0,0,0-19.054-49.242,2.123,2.123,0,0,1,3.494-2.412,118.125,118.125,0,0,1,19.763,51.089,2.119,2.119,0,0,1-1.814,2.387,2.357,2.357,0,0,1-.288.018" transform="translate(-1856.397 929.573)" fill="#161721" fill-rule="evenodd"/>
          <path id="Shape-16" data-name="Shape" d="M2568.186,462.915a2.122,2.122,0,0,1-1.409-3.707,92.113,92.113,0,0,1,40.708-20.855,2.122,2.122,0,0,1,.932,4.141,87.8,87.8,0,0,0-38.824,19.888,2.128,2.128,0,0,1-1.407.534" transform="translate(-1856.379 929.703)" fill="#161721" fill-rule="evenodd"/>
          <path id="Shape-17" data-name="Shape" d="M2547.3,61.1c-6.17,28.277-16.476,67.837-22.649,96.114a128.471,128.471,0,0,0,36.357,9.8c2.939-10.622,6.742-20.7,9.684-31.323l18.112-11.2c.646-8.519,3.358-16.722,5.146-25.075s2.591-17.285-.477-25.258-10.926-14.6-19.441-13.866c-8.937.773-17.792,1.552-26.733.814" transform="translate(-1856.516 928.444)" fill="#f7c7b5" fill-rule="evenodd"/>
          <path id="Shape-18" data-name="Shape" d="M2534.823,65.6a20.737,20.737,0,0,0-1.878,11.441,62.276,62.276,0,0,0,2.522,11.458L2542.974,90c-1.32,11.579-2.638,23.322-.887,34.844s6.975,23,16.417,29.833,23.519,7.823,32.467.351a23.727,23.727,0,0,0,7.556-22.94,26.481,26.481,0,0,0-16.04-18.4,31.166,31.166,0,0,0-25.075,1.625c-2.569-5.07-2.188-11.137-.917-16.675s3.347-10.907,4.03-16.548-1.207-12.324-5.219-16.351a37.468,37.468,0,0,0,29.888.513,21.954,21.954,0,0,0,8.293-5.653,12.267,12.267,0,0,0,3.12-9.327c-.6-4.661-4.448-8.3-8.644-10.422A26.972,26.972,0,0,0,2549.9,57.461c-5.889-.31-12.354,2.909-15.076,8.143" transform="translate(-1856.489 928.369)" fill="#403f3f" fill-rule="evenodd"/>
          <path id="Shape-19" data-name="Shape" d="M2526.793,94.144a12.06,12.06,0,0,0,3.379,9.525,12.339,12.339,0,0,0,7.386,3.857l5.437-17.69c-1.488-3.144-6.716-4.421-10.041-3.4a9.277,9.277,0,0,0-6.16,7.712" transform="translate(-1856.51 928.53)" fill="#f7c7b5" fill-rule="evenodd"/>
          <path id="Shape-20" data-name="Shape" d="M2563.3,96.1a2.829,2.829,0,1,0,2.829-2.828A2.829,2.829,0,0,0,2563.3,96.1" transform="translate(-1856.388 928.554)" fill="#353d59" fill-rule="evenodd"/>
          <path id="Shape-21" data-name="Shape" d="M2584.256,98.919a2.828,2.828,0,1,0,2.828-2.828,2.828,2.828,0,0,0-2.828,2.828" transform="translate(-1856.318 928.563)" fill="#353d59" fill-rule="evenodd"/>
          <path id="Shape-22" data-name="Shape" d="M2580.438,114.33a32.113,32.113,0,0,1-6-.823,1.064,1.064,0,0,1-.792-1.273,1.048,1.048,0,0,1,1.274-.791,31.38,31.38,0,0,0,5.136.758l-1.893-14.046a1.058,1.058,0,0,1,.905-1.195,1.026,1.026,0,0,1,1.192.907l2.2,16.292-1.075.123a9.118,9.118,0,0,1-.953.047" transform="translate(-1856.353 924.674)" fill="#e0a797" fill-rule="evenodd"/>
          <path id="Shape-23" data-name="Shape" d="M2593.7,91.045a1.059,1.059,0,0,1-.813-.378,8.542,8.542,0,0,0-11.343-1.219,1.063,1.063,0,0,1-1.3-1.684,10.753,10.753,0,0,1,14.265,1.536,1.062,1.062,0,0,1-.813,1.745" transform="translate(-1856.333 928.529)" fill="#403f3f" fill-rule="evenodd"/>
          <path id="Shape-24" data-name="Shape" d="M2574.357,89.875a1.055,1.055,0,0,1-.817-.384,9.263,9.263,0,0,0-11.507-1.908,1.062,1.062,0,1,1-1.115-1.807,11.311,11.311,0,0,1,14.253,2.363,1.059,1.059,0,0,1-.814,1.737" transform="translate(-1856.397 928.523)" fill="#403f3f" fill-rule="evenodd"/>
          <path id="Shape-25" data-name="Shape" d="M2532.041,100.62a1.059,1.059,0,0,1-.214-2.1l4.628-.967-4.642-4.108a1.061,1.061,0,0,1,1.4-1.592l7.818,6.911-8.776,1.831a1.034,1.034,0,0,1-.218.022" transform="translate(-1856.495 928.548)" fill="#e0a797" fill-rule="evenodd"/>
          <path id="Shape-26" data-name="Shape" d="M2567.683,122a2.124,2.124,0,0,0-.392,2.976,12.261,12.261,0,0,0,9.274,4.738l.339,0a12.325,12.325,0,0,0,9.194-4.2,2.122,2.122,0,0,0,.51-1.541,2.1,2.1,0,0,0-.728-1.449,2.145,2.145,0,0,0-1.545-.514,2.1,2.1,0,0,0-1.448.728,7.9,7.9,0,0,1-12.232-.355,2.136,2.136,0,0,0-2.972-.389" transform="translate(-1856.376 928.648)" fill="#e0a797" fill-rule="evenodd"/>
          <path id="Shape-27" data-name="Shape" d="M2511.282,212.464c22.066,7.356,69.806,3.528,63.113-27.277-24.732-15.666-31.82-19.864-34.115-21.721-20.486-16.581-34.95-6.321-34.95-6.321s-32.165,0-69.689,21.436c-3.61,20.178,47.906,25.124,75.642,33.882" transform="translate(-1856.814 928.756)" fill="#f7c7b5" fill-rule="evenodd"/>
          <path id="Shape-28" data-name="Shape" d="M2496.4,346a17.944,17.944,0,1,0,17.944-17.944A17.945,17.945,0,0,0,2496.4,346" transform="translate(-1856.61 929.336)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-29" data-name="Shape" d="M2538.5,304.208a17.933,17.933,0,0,0,34.171,7.619c.555-2.8,1.113-5.661,1.671-8.548a17.933,17.933,0,0,0-35.842.929" transform="translate(-1856.47 929.196)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-30" data-name="Shape" d="M2450.965,304.208a17.944,17.944,0,1,0,17.944-17.944,17.944,17.944,0,0,0-17.944,17.944" transform="translate(-1856.762 929.196)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-31" data-name="Shape" d="M2535.161,220.631a17.945,17.945,0,1,0,17.944-17.944,17.945,17.945,0,0,0-17.944,17.944" transform="translate(-1856.481 928.918)" fill="#141f49" fill-rule="evenodd"/>
          <path id="Shape-32" data-name="Shape" d="M2350.771,329.594c-2.891,20.133-.563,41.517,9.679,59.089,17.084-3.551,26.358-23.372,33.322-39.371a589.084,589.084,0,0,1,54.38-98.119c14.787-29.737,2.944-79.576-12.228-72.692-32.652,27.814-56.063,74.124-65.556,93.571-8.921,18.279-16.7,37.389-19.6,57.522" transform="translate(-1830.467 924.835)" fill="#f7c7b5" fill-rule="evenodd"/>
          <rect id="Rectángulo_637" data-name="Rectángulo 637" width="262.657" height="243.809" transform="translate(826.657 1326.565) rotate(-180)" fill="#f0f7fc"/>
          <path id="Shape-33" data-name="Shape" d="M2481.282,273.375c-8.722-.127-87.369,58.622-107.033,78.377-4.988,5.012-10.065,10.147-13.157,16.5s-3.905,14.27-.291,20.346c4.437,7.461,14.442,10.119,22.925,8.28s15.711-7.259,22.261-12.958c13.874-12.071,24.133-26.91,36.914-39.89,14.112-14.336,28.331-28.576,42.459-42.9,0,0,28.6,2.451,28.888.206s-22.99-7.1-22.99-7.1,24.393,2.848,24.552.383-20.259-8.5-20.259-8.5,22.654,4.662,23.471,2.29-22.2-8.147-22.2-8.147,20.435,2.251,20.708-.48-26.571-6.263-36.251-6.4" transform="matrix(0.848, 0.53, -0.53, 0.848, -1272.383, -279.81)" fill="red" fill-rule="evenodd"/>
          <path id="Shape-34" data-name="Shape" d="M2180.9,669.8a68.115,68.115,0,0,0,28.376,39.5,71.829,71.829,0,0,0,48.411,10.553c-5.59-16.639-14.022-32.484-28.861-41.467s-29.958-10.963-47.925-8.582" transform="translate(-1857.662 930.471)" transform="scale(2)" fill="#4c7bb1" fill-rule="evenodd"/>
          <path id="Shape-35" data-name="Shape" d="M2183.712,541.025c-14.281,87.124,42.324,112.878,72.529,116.634,9.567-69.949-50.9-110.87-72.529-116.634" transform="translate(-1857.66 930.045)" fill="#4c7bb1" fill-rule="evenodd"/>
          <path id="Shape-36" data-name="Shape" d="M2303.669,496c-32.088,46.844-34.08,89.31-8.589,136.035,56.2-43.044,28.6-117.3,8.589-136.035" transform="translate(-1857.34 929.895)" fill="#4c7bb1" fill-rule="evenodd"/>
          <path id="Shape-37" data-name="Shape" d="M2428.8,641.242a80.783,80.783,0,0,0-48.858,28.683,81.691,81.691,0,0,0-17.782,54.021c18.073-2.36,33.257-11.731,44.849-25.822s22.868-38.588,21.792-56.883" transform="translate(-1857.058 930.379)" fill="#4c7bb1" fill-rule="evenodd"/>
          <path id="Shape-38" data-name="Shape" d="M2418.007,547.559c-31.537,5.982-62.219,35.624-71.189,58.232s-7.557,47.387-6.075,71.7c26.656-7.449,50.077-24.685,60.847-43.786s27.1-65.264,16.417-86.146" transform="translate(-1857.133 930.067)" fill="#4c7bb1" fill-rule="evenodd"/>
          <path id="Shape-39" data-name="Shape" d="M2299.328,697.775a2.446,2.446,0,0,1,3.45.237c11.428,13.113,20.9,37.132,25.381,60.262a2.446,2.446,0,0,1-4.8.93c-4.334-22.36-13.511-45.638-24.266-57.979A2.445,2.445,0,0,1,2299.328,697.775Z" transform="translate(-1857.27 930.565)" fill="#386795" fill-rule="evenodd"/>
          <path id="Shape-40" data-name="Shape" d="M2401.18,671.579a2.446,2.446,0,0,1,3.149,3.742c-20.562,17.307-46.7,54.651-62.516,84.322a2.445,2.445,0,0,1-4.315-2.3C2353.586,727.165,2380.029,689.383,2401.18,671.579Z" transform="translate(-1857.141 930.478)" fill="#386795" fill-rule="evenodd"/>
          <path id="Shape-41" data-name="Shape" d="M2395.881,577.226a2.446,2.446,0,0,1,3.572,3.342c-49.757,53.187-66.941,116.839-60.241,183.315a2.445,2.445,0,0,1-4.866.491C2327.513,696.586,2345.075,631.535,2395.881,577.226Z" transform="translate(-1857.155 930.163)" fill="#386795" fill-rule="evenodd"/>
          <path id="Shape-42" data-name="Shape" d="M2202.329,582.458a2.445,2.445,0,0,1,3.413.557l82.028,114.018a2.445,2.445,0,1,1-3.97,2.855l-82.027-114.017A2.444,2.444,0,0,1,2202.329,582.458Z" transform="translate(-1857.593 930.182)" fill="#386795" fill-rule="evenodd"/>
          <path id="Shape-43" data-name="Shape" d="M2303.339,545.12a2.446,2.446,0,0,1,2.469,2.422c.223,22.513-1.4,42.507-5.264,67.042l-3.72,23.017c-8.72,54.716-11.445,85.125-8.78,118.894l.21,2.539.98,11.349-5.552-9.946a182.9,182.9,0,0,0-60.687-64.752,2.446,2.446,0,0,1,2.635-4.121,187.243,187.243,0,0,1,56.486,56.736l.528.836-.06-1.185c-1.614-31.281,1.475-61.616,9.719-113.051l2.975-18.353c4.135-25.542,5.869-45.905,5.641-68.957A2.446,2.446,0,0,1,2303.339,545.12Z" transform="translate(-1857.525 930.059)" fill="#386795" fill-rule="evenodd"/>
          <path id="Shape-44" data-name="Shape" d="M2234.748,753.238c-34.874,148.957,194.489,150.449,157.141,0Z" transform="translate(-1857.494 930.752)" fill="#f0a95c" fill-rule="evenodd"/>
          <path id="Shape-45" data-name="Shape" d="M2273.258,651.07a47.357,47.357,0,0,0,4.543,37.814c6.768,11.641,18.618,21.235,32.954,26.681,3.03-13.347,3.5-27.321-4.05-39.327s-18.427-19.459-33.447-25.169" transform="translate(-1857.361 930.412)" fill="#4c7bb1" fill-rule="evenodd"/>
          <path id="Shape-46" data-name="Shape" d="M2231.277,777.609H2395.75c-.113-1.769-.254-3.554-.453-5.373H2231.632c-.166,1.819-.274,3.6-.355,5.373" transform="translate(-1857.494 930.815)" fill="#f6c561" fill-rule="evenodd"/>
          <path id="Shape-47" data-name="Shape" d="M2698.244,394.2c-27.4-8.372-34.823-102.043-37.445-123.258-1.8-14.491-3.429-29.964,3.087-43.031,2.611-5.227,6.539-10.157,6.729-15.994.25-7.641-3.355-20.523-.807-22.13S2679,206.56,2679,206.56s-5.717-23.622-3.291-24.616,8.98,16.871,8.98,16.871-3.446-16.875-2.319-18.752,8.9,11.4,10.084,19.209a25.821,25.821,0,0,1-6.459,21.4,526.634,526.634,0,0,0,21.266,69.219c6.946,18.072,15,36.235,15.887,55.577s-7.324,40.609-24.9,48.73" transform="translate(-1851.068 928.842)" fill="#f7c7b5" fill-rule="evenodd"/>
          
        </g>
      </svg>
      
    

    
</body>
</html>
Marcvilap
  • 23
  • 3
  • I would like to give the feeling that the arm goes up, I do not know if it is rotate and I should do tests but it disappears with all the properties – Marcvilap Jun 13 '21 at 09:35
  • I have attached the svg that I want to animate. I have marked in red the arm that I would like to animate and the one that disappears when applying the transform property from css – Marcvilap Jun 13 '21 at 09:43
  • I try to edit the post. In the header you can see the property that originates it – Marcvilap Jun 13 '21 at 09:51
  • I think that now you can see all the code, excuse me – Marcvilap Jun 13 '21 at 10:01
  • You have a matrix giving a transformation already on the red arm, you'll need to look into what you need to preserve of that to get the arm in the right place when you also attempt a rotation. – A Haworth Jun 13 '21 at 10:15

2 Answers2

3

A lot of the elements in your SVG already have transforms applied. That includes the arm <path> you are trying to rotate. When you give it a new transform, you are replacing the transform it already has. Meaning the path ends up in a totatlly different place in the SVG, as well as being rotated.

The other thing you need to know is that the default origin of an SVG is at the very top left, (0,0). So just applying a rotation by itself, will rotate the shape around the top left of the SVG. Not the elbow joint or any place near the arm.

To control the rotation better, you need to supply a transform origin in your CSS.

#Shape-33 {
  transform-origin: {elbowX}px {elbowY}px;
  transform: rotate(-13deg);
}

Where {elbowX} and {elbowY} are the coordinates of the point you want to rotate the arm around. Otherwise known as the "centre of rotation". Work out what that point should be, and then replace these two values in the solutions below.

Bearing that in mind, there are a few different solutions to your problem.

  1. Wrap the paths you want to transform in a group (<g>) element. Then apply the transform to that. That way the transform it already has will be left untouched.

    <g class="arm">
  <path id="Shape-33" data-name="Shape" d="M2481.282,273.375c-8.722-.127-87.369,58.622-107.033,78.377-4.988,5.012-10.065,10.147-13.157,16.5s-3.905,14.27-.291,20.346c4.437,7.461,14.442,10.119,22.925,8.28s15.711-7.259,22.261-12.958c13.874-12.071,24.133-26.91,36.914-39.89,14.112-14.336,28.331-28.576,42.459-42.9,0,0,28.6,2.451,28.888.206s-22.99-7.1-22.99-7.1,24.393,2.848,24.552.383-20.259-8.5-20.259-8.5,22.654,4.662,23.471,2.29-22.2-8.147-22.2-8.147,20.435,2.251,20.708-.48-26.571-6.263-36.251-6.4" transform="matrix(0.848, 0.53, -0.53, 0.848, -1272.383, -279.81)" fill="red" fill-rule="evenodd"/>
</g>

.arm {
  transform-origin: {elbowX}px {elbowY}>px;
  transform: rotate(-13deg);
}

    But be aware that the transform on the <path> will be applied after the rotation on it's parent group. So, for rotations in particular, that will be a bit awkward. So better to move the path transform to the group, and put the rotation on the path. Ie. swap the transforms.

    <g transform="matrix(0.848, 0.53, -0.53, 0.848, -1272.383, -279.81)">
  <path class="arm" id="Shape-33" data-name="Shape" d="M2481.282,273.375c-8.722-.127-87.369,58.622-107.033,78.377-4.988,5.012-10.065,10.147-13.157,16.5s-3.905,14.27-.291,20.346c4.437,7.461,14.442,10.119,22.925,8.28s15.711-7.259,22.261-12.958c13.874-12.071,24.133-26.91,36.914-39.89,14.112-14.336,28.331-28.576,42.459-42.9,0,0,28.6,2.451,28.888.206s-22.99-7.1-22.99-7.1,24.393,2.848,24.552.383-20.259-8.5-20.259-8.5,22.654,4.662,23.471,2.29-22.2-8.147-22.2-8.147,20.435,2.251,20.708-.48-26.571-6.263-36.251-6.4" fill="red" fill-rule="evenodd"/>
</g>

.arm {
  transform-origin: {elbowX}px {elbowY}>px;
  transform: rotate(-13deg);
}

  1. Include the existing transform into your new transform

    #Shape-33 {
  transform: matrix(0.848, 0.53, -0.53, 0.848, -1272.383, -279.81) rotate(-13deg);
}

    But it won't be as easy as this because of the origin issue discussed above. Because you are combining the transforms, if you use transform-origin, as in solution #1, it will affect both of the transform elements. Likely resulting in a transform that is not what you desired. The origin change needs to only be applied for the rotation part of the transform.

    What you would need to do instead, is inject the origin adjustment calculation into the transform itself.

    #Shape-33 {
  transform: matrix(0.848, 0.53, -0.53, 0.848, -1272.383, -279.81) translate({elbowX}, {elbowY}) rotate(-13deg) translate(-{elbowX}, -{elbowY});
}

    What we are doing here is:

    • translate(-{elbowX}, -{elbowY}) - Move the arm to the SVG origin (0,0)
    • rotate(-13deg) - Rotate the arm around (0,0)
    • translate({elbowX}, {elbowY}) - Move the arm back to the elbow position

  1. If you intend on animating many of the elements in the SVG, then it might be cleaner to remove the existing transforms by applying them to the shape. By that I mean multiplying the points in the path by the matrix, so that the transform is no longer needed.

    Here's a question that should help with that

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
0

Unfortunately you have to many svg transformations: one on the shape and another on the wrapping group. In order to be able to rotate the red hand I would use it with an untransformed use element placed outside the transformed wrapping group. An use element can take a x and y attributes making it easy to place it where ever you need. Then you can transform the shape with css.

In the next example I'm keeping the original shape (default black fill) but you can hide it in a <defs>

In order to know the values for the x and y attributes of the use element I've calculated the bounding box (the getBBox() method) of the shape-33 and of a group wrapping the Grupo_1480 and get the differenge between the x of the two and the same for the y.

Also: in css you will need to set the origin of the transformation. I've marked this point with a blue circle. You can delete the circle.

#red {
  transform-origin: 220px 335px;
  transform: rotate(10deg);
}
<svg viewBox="150 270 300 300">

        <g id="Grupo_1480" data-name="Grupo 1480" transform="translate(-323.234 -966.369)">

          <path id="Shape-33" data-name="Shape" d="M2481.282,273.375c-8.722-.127-87.369,58.622-107.033,78.377-4.988,5.012-10.065,10.147-13.157,16.5s-3.905,14.27-.291,20.346c4.437,7.461,14.442,10.119,22.925,8.28s15.711-7.259,22.261-12.958c13.874-12.071,24.133-26.91,36.914-39.89,14.112-14.336,28.331-28.576,42.459-42.9,0,0,28.6,2.451,28.888.206s-22.99-7.1-22.99-7.1,24.393,2.848,24.552.383-20.259-8.5-20.259-8.5,22.654,4.662,23.471,2.29-22.2-8.147-22.2-8.147,20.435,2.251,20.708-.48-26.571-6.263-36.251-6.4" transform="matrix(0.848, 0.53, -0.53, 0.848, -1272.383, -279.81)"  fill-rule="evenodd"/>
      </g>       

    
  
    <use id="red" x="-323.23" y="-966.37" xlink:href="#Shape-33" fill="red"/>

    
    <circle fill="blue" cx="220" cy="335" r="5"/>
      </svg>
enxaneta
  • 31,608
  • 5
  • 29
  • 42