즉, Snap.svg를 반응 적으로 만드는 방법은 무엇입니까?

Question

this.svgCanvas = Snap ("# svg");

this.svgCanvas.attr ({viewBox : "0 0 236 236"});

다른 모든 브라우저의 경우보기 상자를 설정 한 후에 응답합니다. IE11을 사용하고 있습니다. 응답하지 않습니다. 높이는 항상 작은 값인 으로 고정됩니다. 때로는 svg 이미지가 잘립니다.

See example image

Answer 1

모든 브라우저에서 SVG가 반응하게하려면 다음 단계를 따라주십시오.

• 귀하의 svg 이미지의 전체 너비를 계산하십시오.
• 보기 상자 너비와 높이를 동일하게 설정합니다. 즉, 계산 된 너비를 더 빨리 (필요한 가로 세로 비율과 함께 변경할 수 있습니다).
• this.svgCanvas.attr ({viewBox : "0 0 236 236", height : innerWidth});

여기에서 236은 내 계산 된 svg 이미지 너비입니다.