이렇게 각각 다른 SVG 요소들을 기준 라인을 맞춰서 정렬하고 싶었다. 또한 호버시 변경되는 이미지도 기준선을 따라 정렬해줘서 자연스럽게 변하도록 하고 싶었다.
때문에 해결법을 찾아보던 중에 SVG 자체를 조작해서 기준점으로 SVG의 좌표를 옮기는 것이 가장 간단해보였다.
잉크 스케이프를 사용했다.
1. 문서 속성(Shift+Ctrl+D)로 들어가서 뷰박스의 크기를 통일해준다.
2. 객체를 선택하고 높이와 좌표 등을 확인한다.
하단의 좌표는 Y+Height이기 때문에 150+550= 700이 하단의 좌표가 된다.
3. 전체 객체의 좌표를 통일한다.
그렇다면 하단의 Y 좌표가 700이 되도록 통일하면 될 것이다.
그렇다면 이 경우엔 H+Y가 700이 되도록 Y를 조절해주면 된다.
700-569.154 = 130.846 이니까 Y 좌표를 130.846으로 수정해주면 된다.
이참에 소수점 단위를 정수로 수정하는 것도 괜찮을 것이다. W와 H는 너비와 높이를 나타내기 때문에 필요하다면 정수로 수정한다.
4. 필요하다면 X 좌표도 수정한다.
그리고 X좌표도 중앙으로 맞춰야하는데 Align and Distribute 메뉴를 열고 객체를 선택한 다음에 수직축 중심 맞추기로 중앙 정렬해준다.
5. 전체 객체를 그룹화해준다.
만약에 각각의 path로 분리되어서 정렬이 잘 안된다면 그룹으로 만들어서 그룹을 정렬해주면 된다.
6. 기준선 정렬 완료
실제로 라인을 그려보면 기준 라인이 일치하는 것을 볼 수 있다.
mask-image 등을 사용할경우 SVG의 크기가 뷰 박스의 여백 때문에 작아보일 수 있기 때문에 transform:scale(1.1) 등으로 적절히 조절해준다.
7. 추가적 수정하기
이제 호버시 사용할 SVG 이미지를 만들어주면 된다. 기준점을 기준으로 특정 요소만 움직여준다.
그런 다음 실제 호버시 이미지가 변경되도록 적용해주면 된다.
mask-image: url("asset/edit.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
aspect-ratio: 1; // 정사각형 비율 유지
transform:scale(1.2);
&:hover {
filter: brightness(1.2); // 밝기 조절
mask-image: url("asset/edit2.svg");
}실제 적용 모습
그러면 이제 다른 SVG여도 동일한 위치에서 움직이기 때문에 어색한 움직임이 없이 기준점을 기준으로 움직이는 것을 확인할 수 있다.