Инструменты пользователя

Инструменты сайта


svg_scroll_zoom

Назад

Ссылка на пример

Данный плагин позволяет масштабировать и перемещать SVG элементы в приделе его контекста (<SVG>) тут я добился максимальной поддержки между всеми браузерами которые позволяют отображать SVG.

window.onload = function()
{
    //Главный SVG
    var SVGRoot = document.getElementsByTagName('svg')[0];
    //Элемент который перетягиваем в данном случае это элемент группы 
    var g = SVGRoot.getElementById("viewport");
    //Текущая координата курсора мышки на холсте
    var currentCoords = SVGRoot.createSVGPoint();
    //Получаем позицию клика курсора
    var positionCoords = null;
 
 
    var handleMousedown = function(evt)
    {
        //Получить текущую матрицу элемента
        var matrix = g.getCTM();
        positionCoords = SVGRoot.createSVGPoint();
 
        //Получаем позицию клика курсора на контексте
        positionCoords.x = currentCoords.x - Number(matrix.e);
        positionCoords.y = currentCoords.y - Number(matrix.f);
        //Решает проблему в firefox (и не только там)когда перетягиваем элемент (изображения картинку)
        // чтобы не залипали к курсору
        evt.preventDefault();
    }
 
    var handleMousemove = function(evt)
    {
        currentCoords.x = evt.clientX;
        currentCoords.y = evt.clientY;
 
        if(positionCoords)
        {
            //Получаем текущую координату для размещения холста
            var newX = currentCoords.x - positionCoords.x;
            var newY = currentCoords.y - positionCoords.y;
 
            //Получить текущую матрицу элемента
            var matrix = g.getCTM(); 
 
            //Инициализация новых точек
            var s = "matrix(" +matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d+"," + (matrix.e = newX) + "," + (matrix.f = newY) + ")";
            g.setAttribute("transform", s);            
        }
    }    
 
    var handleMouseup = function(evt)
    {
        //Деактивируем флаг перемещения элемента
        positionCoords = null;
    }
 
    //Делаем кроссбраузерный скроллинг
    var handleScroll = function(evt)
    {
        var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
        if (delta) zoom(delta);
        return evt.preventDefault() && false;
    };
 
    var scaleFactor = 1.1;
    var zoom = function(clicks)
    {
        //Получаем текущую позицию клика курсора контекста
        var pt  = SVGRoot.createSVGPoint();
        pt.x = currentCoords.x;
        pt.y = currentCoords.y;
 
        //Получаем текущую позицию клика курсора холста
        pt = pt.matrixTransform(g.getCTM().inverse());
        //Зум
        var z = Math.pow(scaleFactor,clicks);
        //Тут получаем координаты контекста уже с нужным масштабом и позиции холста
        var k = SVGRoot.createSVGMatrix().translate(pt.x, pt.y).scale(z).translate(-pt.x, -pt.y);
        var matrix =g.getCTM().multiply(k);
        var s = "matrix(" +matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d+"," + matrix.e + "," +  matrix.f + ")";
        g.setAttribute("transform", s); 
    }  
 
    //Инициализация событий
    SVGRoot.addEventListener('mousedown',handleMousedown,false);    
    SVGRoot.addEventListener('mousemove',handleMousemove,false); 
    SVGRoot.addEventListener('mouseup',handleMouseup,false); 
    SVGRoot.addEventListener('DOMMouseScroll',handleScroll,false);
    SVGRoot.addEventListener('mousewheel',handleScroll,false);    
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SVG</title>
<script src="js/main.js"></script>
<style>
    svg {
    border: 1px solid #aaa;
    overflow: hidden; /* Thanks IE9! */
}
</style>
 
</head>
<body>
    <div >
        <svg width="500" height="500">
            <g id="viewport">
                <circle cx="100px" cy="100px" r="20px" fill="red" />
                <circle cx="160px" cy="120px" r="20px" fill="red" />
                <circle cx="140px" cy="180px" r="20px" fill="red" />
                <rect x="132" y="62" width="46" height="72" stroke="black" stroke-width="2" fill="red"/>
                <rect x="242" y="195" width="63" height="52" stroke="black" stroke-width="2" fill="red"/>
                <rect x="199" y="356" width="153" height="71" stroke="black" stroke-width="2" fill="red"/>
                <rect x="106" y="277" width="70" height="70" stroke="black" stroke-width="2" fill="red"/>
                <rect x="371" y="74" width="63" height="79" stroke="black" stroke-width="2" fill="red"/>            
            </g>
        </svg>
    </div>
</body>
</html>