SVG (4) 썸네일형 리스트형 QGIS 지도 shp를 SVG로 저장하기 QGIS에서 행정구역만 표시한 지도를 svg로 저장하는 방법! 1) 프로젝트 -> 새 인쇄 조판 2) 조판 인쇄 생성 창이 뜹니다. 제목을 입력 후, 확인 3) 새로운 창이 열립니다. 항목추가 -> 맵추가 드래그해주세요! 그럼 아래와 같이 이미지가 뿅! 나옵니다! 4) SVG로 내보내기 만족스럽지 않을 수 있다는 창이 하나 뜨는데, 괜찮았습니다. 닫기 버튼 눌러버리세요! 옵션도 뭐.. 만질게 거의 없었습니다! 저장버튼 누르세요! 짠! 이렇게 svg로 저장이 잘 됐습니다. 피그마나 일러스트레이터에서 불러와서 색상을 변경하면 될 것 같습니다! 플러그인으로 저장하는 방법은 아래 블로그 참고하세요! https://www.lucypark.kr/blog/2012/09/10/shp-to-svg/ shp 파일을 svg.. 마우스 오버시 svg fill 변경하기 마우스 오버시 svg fill 변경하기. 이렇게 만들어 놓긴했는데 반응이 느려서..사용 안하기로 함. function handleHover(button) { const svgPath = button.getAttribute("data-svg-path"); const svgDiv = button.querySelector("div"); const originalHTML = button.innerHTML; // 초기 HTML 내용 저장\ // 버튼에 마우스 호버 이벤트 리스너 추가 button.addEventListener("mouseenter", () => { // SVG 파일 로드 fetch(svgPath) .then(response => response.text()) .then(svgData => { //.. svg fill을 javascript로 변경하기 프로젝트에 아이콘 이미지를 png로 사용 중이었는데, 상태가 normal과 hover 2가지이다. 그렇다보니 모든 아이콘 이미지가 2개씩 있다. 그냥 뭐 그대로 해도 되는데.. 이번에 내가 맡은 부분에서는 svg 파일 하나로 컨트롤을 해보고 싶었다. svg 파일을 이미지로 사용하면 마우스 오버 했을 때, fill을 변경 할 수가 없어서 자바스크립트로 했다. css background image로 해도 마찬가지로 fill을 변경 할 수 없었다. // pu_btn 마우스 오버 function handleHover(button) { const svgPath = button.getAttribute("data-svg-path"); const svgDiv = button.querySelector("div"); co.. SVG 간단 프로그레스 바 progress bar HTML - SVG 100 45 CSS .wrap{background-color: #1A253F; padding:1rem; } svg {display:block; margin:0 auto;} svg text {font-size:0.75rem; font-family: 'Montserrat', sans-serif; fill:#fff; /*svg text태그는 fill로 해야 color처럼 먹힘 */} 이전 1 다음
