Snap.svg를 사용해 보았습니다.

2256 단어 Snap.svgSnap.svg.jsSVG
이 기사 의 내용을 자신도 시험해 보았으므로 망비록.
  • Snap.svg
  • svg 대응 상황

    • 준비


  • 이라레에서 svg 이미지를 생성 (변형 후와 변형 전의 2 종류)
  • 생성 된 이미지의 svg 경로를 얻습니다.
  • 사용하는 것은, 취득한 패스만.

    • 그러나



    CODEPEN을 참조하십시오
    See the Pen svg animation with Snap.svg.js by takuchan ( @ 타쿠 짱 ) on CodePen .

    하마 타코


  • 변형 후와 변형 전에서 앵커의 수가 다르면 애니메이션이 엉망이 된다.
  • js에서 path를 append하려고 생각하고 
    • document.createElement('path');

    했지만 path를 만들 때,
    document.createElementNS("http://www.w3.org/2000/svg","path");

    그렇지 않으면 올바른 SVGElement의 경로로 생성되지 않습니다.

    감상


  • Snap.svg를 사용하면 이번과 같은 애니메이션을 쉽게 구현할 수 있다.
  • 「svg이미지의 조정→패스의 취득→코드에 패스의 임베딩→svg이미지의 조정」이라고 하는 작업을 디자이너, 코더간에서 교환하면, 꽤 수고가 늘어나는 생각이 든다.
  • 코더도 이라레(베지어 곡선)가 잘 다루지 않으면 예쁜 애니메이션은 어렵다.
  • 반대로, 조정은 패스를 변경할 뿐이므로, 코더가 아니어도 할 수 있는?

    • 추가


  • IE11(VirtualBox)에서 확인한 바, svg의 사이즈가 폭 가득 차지 않고, 항상 고정 사이즈로 표시되어 버리는 문제가 있었다.
  • 이것은 버그보다는

    • 단순히 SVG1.1의 사양을 IE가 아직 구현하지 않았을 뿐, 사실, IE는 CSS2.1의 사양에 따라 폴백을 적절하게 (?) 작동시키고 있다

    라는 것 같다. (참고: htp // 아사무자 k. jp/HTML/483 )

    결론


  • svg에 대해서 height를 100%로 맞추고 있었지만, 이것이라고 잘 높이가 효과가 없다.
  • svg의 부모 요소의 padding-top에 표시하고 싶은 svg의 가로 세로 비율을 맞추어 준다(img로 잘 하는 녀석)와 잘 높이가 맞은 것처럼 보인다. (IE11, IE10, IE9, Safari, Firefox, Chrome, ios Safari (9.2), ios Chrome)
    • 테이블의 왼쪽 상단에 대각선을 씁니다.
    favicon도 svg로 할까!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage