svg.js와 svg.draggable.js를 사용하여 SVG 태그의 객체를 드래그 앤 드롭합니다.

6906 단어 SVG
이 기사는 "SVG Advent Calendar 2014"의 7 일째 기사입니다. 전날의 기사는 _단시오씨의 「 IE에도 대응한 반응형 SVG를 만드는 방법 」이었습니다.

이전, 「HTML5의 캔버스에서 여러 이미지를 드래그 앤 드롭 해보십시오. 」로 쓴 내용과 같은 것을 SVG로 시험해 보고 싶어졌으므로 정리했습니다.

SVG를 조작하기 위한 라이브러리는 Raphaël 이나 Snap.svg 가 유명합니다만, 이번은 svg.js 과 그 플러그인인 svg.draggable.js 를 이용했습니다.

svg.js는, minify 된 것이라면 11.8KB 정도로 매우 경량으로, 문서도 보기 쉽고, 이번 만져 보아 매우 취급하기 쉬운 라이브러리라고 느꼈습니다.


실제의 코드는 이런 느낌으로, 오브젝트에 대해서 「draggable()를 호출한다」단지 이것뿐입니다. 간단! !

HTML
<head>
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/svg.js/dist/svg.js"></script>
    <script src="bower_components/svg.draggable.js/svg.draggable.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
</head>
<body>
    <svg id="drawing" style="border:solid 1px;"></svg>

    <script>
        var draw = SVG('drawing').size(500, 500);

        var image = draw.image('images/PAK15_sesujiwonobasutsuyopon500.jpg', 150, 100).dx(30).dy(30);
        image.draggable();

        var text = draw.text('画像はドラッグ＆ドロップできますか？').move(150, 150).fill('#f06');
        text.draggable();

        var rect = draw.rect(100, 100).attr({fill: '#eee'}).dx(200).dy(200);
        rect.draggable();

        var circle = draw.circle(100).attr({fill: '#ff0'}).dx(300).dy(300);
        circle.draggable();
    </script>

</body>


이렇게 svg에 늘어서있는 개체가. . . .





드래그 앤 드롭이 가능합니다.




  • 이번 검증에 이용한 것
  • Yeoman 제너레이터의 generator-webapp (검증용 HTML의 편지지 작성)
  • Bower (svg.js 및 svg.draggable.js 설치)
  • PAKUTASO의 츠요 폰 이미지 ([ photo by 팩타소. 작은 m ])

    • HTML5로 도트 그림 확대
    svg.js와 canvg를 사용하여 SVG 태그의 객체를 클라이언트 측에서만 이미지화합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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