transform 포지션 임의변경 오류

미해결질문
recodinho 프로필

안녕하세요,

1분코딩 선생님 강좌 너무 잘 듣고있습니다. 어제오늘 강좌 클리어 하면서 주말 순삭됐네요~!ㅎㅎ

제가 따라하다가 질문이 생겼는데 이렇게 여쭤봐도 될지 모르겠습니다.

일단 문제는 arm이라는 클래스 이름에 mining이라는 키프레임으로 애니메이션을 걸면 곡괭이질 하는 팔 위치가 오른쪽으로 변경됩니다. 억지로 translateX 활용해서 원래 위치 잡았는데 왜 그런지 한 번 봐주실 수 있을까요? 

아래 html코드 그대로 붙여넣습니다.

감사합니다. 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>DataMining</title>

  </head>

<body>

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

    <defs>

      <style>

        .cls-1, .cls-2, .cls-6 {

          fill: #2e75b6;

        }

        .cls-2 {

          font-size: 93.8px;

          font-family: UbuntuCondensed-Regular, Ubuntu Condensed;

        }

        .cls-3, .cls-4, .cls-5 {

          letter-spacing: 0em;

        }

        .cls-6, .cls-7, .cls-8 {

          fill-rule: evenodd;

        }

        .cls-6, .cls-9 {

          animation: bar-move 0.7s 0.3s infinite alternate cubic-bezier(0.42, 0, 0.3, 1.01);

          transform-origin: bottom;

          transform-box: fill-box;

        }

        .cls-7 {

          fill: #9dc3e6;

          animation: bar-move 0.7s 0.5s infinite alternate cubic-bezier(0.42, 0, 0.3, 1.01);

          transform-origin: bottom;

          transform-box: fill-box;

        }

        .cls-8 {

          fill: #adb9ca;

          animation: bar-move 0.7s 0.7s infinite alternate cubic-bezier(0.42, 0, 0.3, 1.01);

          transform-origin: bottom;

          transform-box: fill-box;

        }

        @keyframes bar-move {

            0% { transform: scale(1); }

           30% { transform: scale(0.9); }

          100% { transform: scale(1); }

        }

        .cls-9 {

          fill: none;

          stroke: #2e75b6;

          stroke-miterlimit: 8;

          stroke-width: 5.26px;

        }

        .body, .head {

          fill: #727272;

        }

        .arm {

          display: flex;

          fill: #727272;

          animation: mining 0.3s infinite alternate;

          transform-origin: left;

          transform-box: fill-box;

        }

        @keyframes mining {

          from{ transform: translateX(-45px) rotatez(0deg); }

          to  { transform: translateX(-45px) rotatez(10deg); }

        }

      </style>

    </defs>

    <path class="cls-1" d="M241,113h3c.85,2,1.18,4.67,2.27,7.45s2.18,5.7,3.29,8.73,2.19,6.08,3.23,9.12,1.93,5.82,2.69,8.35q1.13-3.79,2.61-8.35t3.1-9.12q1.63-4.55,3.22-8.73c1-2.78,2-5.17,2.85-7.18h6.31q.49,5.25.89,11.15c.25,3.92.49,8,.7,12.09s.39,8.35.53,12.63.29,8.52.43,12.73H270q-.15-4.63-.25-9.75t-.28-10.28q-.18-5.15-.39-10c-.14-3.25-.31-6.24-.5-8.95-.42,1.17-.95,2.63-1.59,4.39s-1.29,3.66-2,5.71-1.39,4.17-2.12,6.35-1.41,4.27-2.05,6.28-1.2,3.84-1.69,5.5-.89,3-1.17,4l-5-.13c-.94-3.37,0-6.91-1-10s-3.08-5.27-4-8-2.15-5.76-3-8-1.29-4.32-2-6" transform="translate(-53.2 -4.89)"/>

    <path class="cls-1" d="M286.93,113.27h6.36v48.6h-6.36Z" transform="translate(-53.2 -4.89)"/>

    <path class="cls-1" d="M329.49,161.87q-1.69-4.14-3.86-9t-4.52-9.67q-2.37-4.87-4.84-9.68t-4.88-8.94v37.24h-5.94v-48.6h5.3q2.69,4.35,5.2,8.9t4.77,9Q323,135.64,325,140t3.71,8.17V113.27h5.94v48.6Z" transform="translate(-53.2 -4.89)"/>

    <path class="cls-1" d="M346.17,113.27h6.36v48.6h-6.36Z" transform="translate(-53.2 -4.89)"/>

    <path class="cls-1" d="M388.72,161.87q-1.7-4.14-3.85-9t-4.52-9.67q-2.37-4.87-4.85-9.68t-4.87-8.94v37.24h-5.94v-48.6H370q2.68,4.35,5.19,8.9t4.78,9q2.25,4.45,4.27,8.77t3.72,8.17V113.27h5.93v48.6Z" transform="translate(-53.2 -4.89)"/>

    <path class="cls-1" d="M403.36,137.53a46.52,46.52,0,0,1,1.27-11.71,21.71,21.71,0,0,1,3.64-7.89,13.81,13.81,0,0,1,5.72-4.42,19.84,19.84,0,0,1,7.53-1.37,18.29,18.29,0,0,1,5.8.88,16.79,16.79,0,0,1,4.24,2l-2,5.26a16.72,16.72,0,0,0-3.53-1.86,12.2,12.2,0,0,0-4.39-.74q-6.15,0-8.83,4.95t-2.69,14.9a43.58,43.58,0,0,0,.82,9.12,19.38,19.38,0,0,0,2.29,6.17,9.52,9.52,0,0,0,3.61,3.51,10,10,0,0,0,4.73,1.12,12.5,12.5,0,0,0,3.75-.49V138h6.36v22.86a22.22,22.22,0,0,1-4.73,1.55A27.31,27.31,0,0,1,421,163a16.52,16.52,0,0,1-7.07-1.51,14.84,14.84,0,0,1-5.62-4.63,23.09,23.09,0,0,1-3.68-7.92A43.89,43.89,0,0,1,403.36,137.53Z" transform="translate(-53.2 -4.89)"/>

    <text class="cls-2" transform="translate(148.73 79.4) scale(1.01 1)"><tspan class="cls-3">D</tspan><tspan class="cls-4" x="54.31" y="0">A</tspan><tspan class="cls-5" x="101.58" y="0">T</tspan><tspan x="141.82" y="0">A</tspan></text>

    <polygon class="cls-6" points="157.16 84.48 184.56 84.48 184.56 159.87 157.16 159.87 157.16 84.48 157.16 84.48"/>

    <polygon class="cls-7" points="120.94 104.64 148.33 104.64 148.33 159.87 120.94 159.87 120.94 104.64 120.94 104.64"/>

    <polygon class="cls-8" points="86.48 119.54 113.87 119.54 113.87 159.87 86.48 159.87 86.48 119.54 86.48 119.54"/>

    <line class="cls-9" x1="182.02" y1="85.32" x2="202.33" y2="148.91"/>

    <path class="body" d="M89.38,63.1C86.63,73,84,83,81.87,93c-.36,1.69,1.52,4.43,3.12,5.84,4.12,3.65,8.28,7.55,13.11,10,10.23,5.28,15.46,13.51,17.28,24.53,1.26,7.57,3,15.07,4.32,22.63.89,4.9-.73,7.76-4.46,8.49-4.79.94-8.52-1.31-9.51-6A136.49,136.49,0,0,1,103.17,144c-1-9.56-5.83-16.48-13.7-21.53-4.07-2.6-8.27-5-12.41-7.5l-1.43,1.15c.84,3.11,1.14,6.51,2.62,9.27,5.63,10.48,3,19.55-4,28.12-1.75,2.13-3.2,4.55-5.12,6.5-1.59,1.62-3.53,3.57-5.56,3.91-2.74.46-5.71-.49-8.58-.83.43-2.4.35-5,1.4-7.13A116,116,0,0,1,63.64,144c3.41-5.12,3.54-10.26.68-15.61-1.44-2.69-2.51-5.6-4.15-8.14-6.58-10.19-8.3-21.17-6-32.95,2.22-11.44,5-22.68,10.59-33C71.31,42.09,76.85,39.66,90,44.11,94.84,45.76,99.19,54.3,98,55" transform="translate(-53.2 -4.89)"/>

    <path class="arm" d="M83.52,54.56c-5.41-6.34-6.67-14.9,6.45-10.45a70.58,70.58,0,0,1,13.93,7c8.55,5.24,16.87,10.84,25.26,16.33,1.75,1.15,3.17,1.63,4.94-.17,11-11.22,22.06-22.35,33.09-33.53a13.61,13.61,0,0,0,1.34-2.26c-5.89-3.33-11.66-6.53-17.37-9.86-1.29-.76-3.07-1.78-3.34-3-.39-1.8.34-3.85.59-5.8,1.63.32,3.48.24,4.84,1,6.05,3.44,11.92,7.21,18,10.66a7.36,7.36,0,0,0,4.53.83c3.08-.52,7,2.38,6.08,5.31s.79,4.16,1.86,6.12q4.65,8.54,8.86,17.31c.5,1,.07,2.54-.64,4.16-4.4-7.34-8.4-14.79-16.36-20.43-1.45,1.81-2.8,3.7-4.35,5.39-9.32,10.2-18.73,20.31-28,30.57a8.85,8.85,0,0,0-2.1,4.88c-.27,3.77-2.3,5.42-5.67,4.89a19.89,19.89,0,0,1-7.62-2.85C120.78,76.06,114,71,107,66.31a98.13,98.13,0,0,0-10.64-5.87" transform="translate(-53.2 -4.89)"/>

    <path class="head" d="M83.52,26.35c-.09-6.4,2.24-11.67,7.59-15.28,7.65-5.16,16.73-1.72,19.35,7.17,2.45,8.3-2,18.52-9.34,21.22C91.52,43,83.56,37.09,83.52,26.35Z" transform="translate(-53.2 -4.89)"/>

  </svg>

</body>

</html>

1분코딩 프로필
1분코딩 4달 전

와 만드신거 너무 귀엽네요 ㅋㅋㅋㅋ 제 스타일이에요.. 데이터 마이닝 관련 프로젝트 하시나봐요^^

<path class="arm" 부분의 끝을 보면,
transform="translate(-53.2 -4.89)" 이렇게 설정된 부분이 있을거에요.
만드신 .arm에 기본적으로 X 방향으로 -53.2의 translate가 적용된 상태라서,
mining에서 transform: rotatez(0deg);로 세팅하는 순간 translate는 해제가 되어 이상한 위치로 가버리는 현상입니다~^^
그래서 정확히 만드셨던 디자인의 위치 그대로 하시려면
transform: translate(-53.2px, -4.89px) rotatez(0deg); 이런식으로 translate를 보존해 주시면 됩니다.
이런 이유로
transform: translateX(-45px) rotatez(0deg);로 하셨을 때도 적당히 비슷하게 보였던 것이고요~

그럼 멋진 작품 만드시길~~ㅎㅎ

recodinho 프로필
recodinho 4달 전

1분코딩님~ 친히 답변 달아주시고 너무 감사합니다!

아~ rotate가 translate를 덮어쓰는군요! 앞으로 유의해서 좌표설정 하겠습니다!

질문이 하나 더 있는데.. SVG가 브라우저마다 조금씩 다르게 작동하나요?

제가 여러 아이콘들을 만들어봤는데 그 중 몇개는 iOS에서 제대로 작동을 안하네요..

샘플로 하나 더 아래 붙여봤는데 혹시 시간 괜찮으시면 좀 봐주실 수 있을까요?

컴퓨터랑 안드로이드에서는 의도했던 애니메이션이 작동하는데,

iOS에서만 빨간점이 왼쪽 위에 걸려서 내려오지를 않습니다. ㅜㅠ

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Optimization</title>

  </head>

<body>

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

    <defs>

      <style>

        .optimization {

          font-size: 93.8px;

          fill: #2e75b6;

          font-family: UbuntuCondensed-Regular, Ubuntu Condensed;

        }

        .otmz {

          letter-spacing: 0em;

        }

        .tangent, .cls-9 {

          stroke: #0404ff;

          stroke-width: 5.26px;

        }

        .uline {

          fill: none;

          stroke: #000;

          stroke-width: 2.63px;

        }

        .cls-10 {

          stroke: #0404ff;

          stroke-width: 5.26px;

        }

        .circle{

          fill: red;

          offset-path: path("M11.5 19.5 s 55 39 70.09 39 s 76.41 -39 76.41 -39");

          animation: umove 3s infinite alternate cubic-bezier(0.4, -0.26, 0.6, 1.21);

        }

        @keyframes umove {

          0% {

            fill-opacity: 0%;

            offset-distance: 0%;

            transform: scale(0);

          }

          50% {

            fill-opacity: 100%;

            offset-distance: 50%;

            transform: scale(1);

          }

          100% {

            fill-opacity: 0%;

            offset-distance: 100%;

            transform: scale(0);

          }

        }

      </style>

    </defs>

    <text class="optimization" transform="translate(141.4 89.74) scale(1.01 1)">p

      <tspan class="otmz" x="43.8" y="0">t</tspan>

      <tspan class="otmz" x="73.63" y="0">i</tspan>

      <tspan class="otmz" x="96.43" y="0">m</tspan>

      <tspan class="otmz" x="162.09" y="0">i</tspan>

      <tspan class="otmz" x="184.88" y="0">z</tspan>

      <tspan class="otmz" x="218.27" y="0">a</tspan>

      <tspan class="otmz" x="258.6" y="0">t</tspan>

      <tspan class="otmz" x="288.43" y="0">i</tspan>

      <tspan class="otmz" x="311.22" y="0">o</tspan>

      <tspan class="otmz" x="355.03" y="0">n</tspan>

    </text>

    <path class="uline" d="M15.33,38c27.14,42.06,54.27,84.13,82.22,86S159.76,63.82,183,49.11s38.68-14,54.1-13.4" transform="translate(-14.22 -34.13)"/>

    <line class="tangent" x1="36.89" y1="93.54" x2="128.73" y2="93.54"/>

    <circle class="circle" r=30 ></circle>

  </svg>

</body>

</html>

1분코딩 프로필
1분코딩 4달 전

offset-path는 애플 계열 브라우저들이 지원을 안하더라고요.
아래와 같은 방식으로 해보세요~

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>SVG</title>

    <style>

        path {

            stroke: lightgray;

            stroke-width: 20;

            fill: none;

        }

        circle {

            fill: black;

        }

    </style>

</head>

<body>

    <svg width="360" height="120" viewBox="-10 10 360 55">

        <path d="M11.5 19.5 s 55 39 70.09 39 s 76.41 -39 76.41 -39" id="road"></path>

        <circle r="10">

            <animateMotion dur="1.6s" repeatCount="indefinite">

                <mpath xlink:href="#road"></mpath>

            </animateMotion>

        </circle>

    </svg>

</body>

</html>

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스