-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
transform 포지션 임의변경 오류
20.05.03 18:55 작성 조회수 629
0
안녕하세요,
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>
답변을 작성해보세요.
0
1분코딩
지식공유자2020.05.11
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>
0
recodinho
질문자2020.05.08
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>
0
1분코딩
지식공유자2020.05.04
와 만드신거 너무 귀엽네요 ㅋㅋㅋㅋ 제 스타일이에요.. 데이터 마이닝 관련 프로젝트 하시나봐요^^
<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);로 하셨을 때도 적당히 비슷하게 보였던 것이고요~
그럼 멋진 작품 만드시길~~ㅎㅎ
답변 3