Вложенные контейнеры с svg-pan-zoom - PullRequest
Новая
       30

Вложенные контейнеры с svg-pan-zoom

0 голосов
/ 03 мая 2020

У меня сложилось впечатление, что когда svg-pan-zoom применяется к вложенному контейнеру, другие элементы (возможно, в других вложенных контейнерах) не затрагиваются панорамированием. Это работает, но как-то частично. У меня есть следующий код: 

// https://github.com/svgdotjs/svg.js
// https://github.com/ariutta/svg-pan-zoom
var mySVG = SVG('drawing').size(500, 300);
var nest1 = mySVG.nested().attr('id','svg-container').addClass('svg-container');
var myGroup = nest1.group();
mySVG.rect(20,20).fill('#f33'); // rectangle that should not scale
console.log('mySVG');
console.log(mySVG);
console.log(' --- ');

//myGroup.rect(1000,1000).fill('#eee');
var circle = myGroup.circle(80).move(100,100);

var panZoomInstance = svgPanZoom('#svg-container', {
    panEnabled: true,
    zoomEnabled: true,
    dblClickZoomEnabled: true,
    mouseWheelZoomEnabled: true,
    preventMouseEventsDefault: true,
    zoomScaleSensitivity: 0.2,
    minZoom: 0.5,
    maxZoom: 3,
    fit: false,
    contain: false,
    center: false,
    refreshRate: 'auto',
});

Проблема проиллюстрирована здесь: https://codepen.io/bpatzak/pen/VwvMyNb Черный круг принадлежит вложенному контейнеру, где должно применяться панорамирование, красный прямоугольник находится в другом контейнер.

Панорамирование и масштабирование работают только тогда, когда мышь находится внутри черного круга.

Это предполагаемое поведение? Могут ли панорамирование и масштабирование работать на весь div? (Конечно, я могу нарисовать большой фоновый прямоугольник во вложенном контейнере, подвергнутом панорамированию, но мне это кажется странным).

Любая помощь приветствуется.

...