위 챗 애플 릿 에서 SVG 벡터 아이콘 을 사용 하 는 방법 에 대한 자세 한 설명

위 챗 애플 릿 개발 과정 에서 SVG 벡터 아이콘 을 애플 릿 에서 사용 해 야 합 니 다.왜 SVG 아이콘 을 사용 하 는 지 이 글 을 본 사람 을 믿 어야 합 니 다.모 르 겠 으 면 바 이 두 를 사용 하 세 요.
위 챗 애플 릿 에 SVG 벡터 그림 을 사용 하여 2 가지 도입 방법 을 표시 합 니 다.
1.SVG 아이콘 을 BASE 64 인 코딩 으로 변환
사용http://tools.jb51.net/transcoding/img2base64 도 구 는 도입 할 SVG 아이콘 을 BASE 64 인 코딩 으로 변환 합 니 다.

메모:BASE 64 인 코딩 을 생 성 할 때 시작data:image/svg;을data:image/svg+xml;온라인 도구 로 수정 해 야 하 는 문제 입 니 다.다른 온라인 BASE 64 인 코딩 기능 을 사용 할 때 주의해 야 합 니 다.
변 환 된 인 코딩 을 wxss 파일 에 해당 하 는background-image:url("SVG BASE64 ")으로 복사 합 니 다.다음 코드 입 니 다.


.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+2T3kLSMg8LC1QJzR/Dv3t/jrmSE9K/tTuKTbVJF1LQ93QcQG6L6nPEkWqECzSEhhiahTSNGLN0KKH4yG1CDLmhCN8EMskTdhAEXqaofsy9LWqNOCmeEgtgJRZZOF4EA0DlnSoC642kfxdQ+o+S1IOeURyXlRtSxVlJN3Ykve1Eaqwyvs2WuhQYC8Sq7nVDhYb6QhzJlL9rxkltKKokZKLdEhHB8l8OdRUNG6qsQ9sclBHkZ6k7Ojc0jJaSfLqYCG+g3h1E99dDnm+P2oJetK2VLClE7LNtigHIBZI8mpOiGb0EebGhojVQl1xj5FXRSITP8YpRBpYFhiOKJlgJq9oKs3xhA+kB5UvppaOxhxJ0zGxMxDMkDSTZkiaIWkmRUn6fwEGAE2xLmu6HJtTAAAAAElFTkSuQmCC");
width:100rpx;
height:100rpx;
background-size: contain
}

아이콘 을 요소 크기 에 따라 자동 으로 크기 조정 할 수 있 도록background-size: contain속성 을 추가 해 야 합 니 다.
그리고 wxs 에 대응 하 는 wxml 파일 에 추가 합 니 다.


 <view class="svg">
 </view>

컴 파일 후의 효과

2.운송 주소 로 SVG 아이콘 도입
SVG 아이콘 을 웹 사이트 서버 에 업로드 하고 브 라 우 저 에 SVG 아이콘 주 소 를 입력 하여 정상적으로 열 수 있 는 지 테스트 합 니 다.

SVG 아이콘 주소 복사 background-image:url(SVG URL )아래 와 같다.


.svg{background:url(http://mt.com/coding.svg);
 width:100rpx;
 height:100rpx;
}

컴 파일 후의 효과

요약:
첫 번 째 방법 은 SVG 아이콘 BASE 64 인 코딩 을 WXSS 파일 에 직접 넣 습 니 다.이렇게 하면 위 챗 애플 릿 의 부 피 를 크게 증가 시 킬 수 있 습 니 다.아이콘 을 바 꾸 려 면 다시 컴 파일 하여 업로드 해 야 합 니 다.추천 하지 않 습 니 다.
두 번 째 방법 은 첫 번 째 방법 에 비해 애플 릿 의 부 피 를 늘 리 지 않 고 아이콘 을 바 꿀 때 서버 에 업로드 하면 되 며 매우 유연 하 므 로 두 번 째 방법 을 추천 합 니 다.
더 많은 위 챗 애플 릿 개발 글 아래 관련 글 을 클릭 하여 찾 아 보 세 요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

OpenSSL 생 성 ssl 인증서

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

위 챗 애플 릿 에서 SVG 벡터 아이콘 을 사용 하 는 방법 에 대한 자세 한 설명

좋은 웹페이지 즐겨찾기