отзывчивый svg, использующий viewbox и отношение preserveaspect, если ширина и высота не указаны в svg - PullRequest
Новая
       0

отзывчивый svg, использующий viewbox и отношение preserveaspect, если ширина и высота не указаны в svg

0 голосов
/ 24 декабря 2018

У меня большое изображение SVG, и я хочу, чтобы оно хорошо масштабировалось в различных сценариях (см. Фрагмент).

Первоначально я использовал атрибуты width и height svg и устанавливал эти значениякаждый раз, когда размер экрана изменялся.

Затем я обнаруживал окно просмотра.

Что я не понимаю, так это то, что я устанавливаю ширину и высоту аргументов viewBox, если нет атрибутов svg width и height.

У меня есть этот документ svg 

document.addEventListener("DOMContentLoaded",function(){
  var container = document.querySelector('.chart');

  container.addEventListener('click', popOut, false)
});

function popOut() {
  var container = document.querySelector('.chart');

  if (container.className.split(/\s+/).indexOf("popper") === -1) {
container.classList.add('popper');
  } 

  var svg = document.querySelector('svg');
}
html {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

div {
  border: 1px solid gray;
}

body {
  height: 100%;
  font-size: 20px;
}

path {
  stroke: #000;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.container>div {
  flex: 1;
}

.row {
  display: flex;
}

.item {
  flex: 1;
  padding: 8px;
}

.chart {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: top;
  overflow: hidden;
  "

}

.popper {
  z-index: 1000 !important;
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  background-color: #fff;
}
<html>

  <body>
<div class="container">
  <div class="item">Div One</div>
  <div class="row">
    <div class="item chart">
      <button type="button" onClick="window.popOut()">
      Pop Out
      </button>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 800"><g class="vx-group vx-tree" transform="translate(30, 37)"><g transform="matrix(1,0,0,1,0,0)"><g class="vx-group" transform="translate(0, 0)"><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path></g><g class="vx-group" transform="translate(0, 0)"><g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"><g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon></svg>
      <g class="node__plan undefined node__inactive">
        <use xlink:href="#icon-Plan"></use>
      </g>
      <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0"
          style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g>
      </g>
      </g>
      <g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
        <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"></polygon></svg>
          <g class="node__service node__active">
            <use xlink:href="#icon-Service"></use>
          </g>
          <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
            <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
          </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line></g></svg></g>
      </g>
      <g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
        <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
          <g class="node__service node__inactive">
            <use xlink:href="#icon-Service"></use>
          </g>
          <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">General Accounting</tspan></text></svg>
            <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
          </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
      </g>
      <g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
        <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
          <g class="node__service node__inactive">
            <use xlink:href="#icon-Service"></use>
          </g>
          <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg>
            <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
          </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
      </g>
      <g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
        <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
          <g class="node__activity node__inactive">
            <use xlink:href="#icon-Activity"></use>
          </g>
          <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg>
            <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
          </g>0</g>
      </g>
      <g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
        <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
          <g class="node__activity node__inactive">
            <use xlink:href="#icon-Activity"></use>
          </g>
          <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
            <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
          </g>0</g>
      </g>
      </g>
      </g>
      </g>
      </svg>
    </div>
    <div class="item">Column two</div>
    <div class="item">Column Tree</div>
  </div>
</div>

  </body>

</html>

Я установил отношение preserveAspect к значению по умолчанию xMinYMin meet, но я не знаю, как установить начальные значения ширины и высоты.

В моем примере диаграмма svg начинается в виде небольшого изображения в левом нижнем углу, а затем может появиться, чтобы захватить всю страницу.

Я действительно не понимаю, как получитьзначения.

Я только что использовал метод проб и ошибок, чтобы получить начальные значения viewBox, и мне хотелось бы программно узнать, как получить их на основе элемента parenet или каким-либо другим способом.

Много читайте в Интернете, но все еще в неведении о том, какими должны быть начальные значения для первого значения и когда svg распространяется по всей странице.

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

Важная часть, с которой вы, кажется, испытываете трудности, это числа внутри viewBox="0 0 1200 800" верно?

Давайте разберем это немного: в нашем примере давайте рассмотрим нечто знакомое, к которому мы можем прикоснутьсяи видите, стена.Думайте о viewBox как о стене.Эта стена - это смотровое окно (коробка) с гвоздем на стене.SVG - это квадратная коробка - как стена, у коробки есть ширина и высота.Гвоздь где-то попадает в нашу стену, гвоздь также имеет место на нашей стене с координатами x и y (вверху / слева).

Используя это в качестве основы, эти числа (в атрибуте viewBox) говорят вам о точках x (слева) и y (сверху) на стене, где находится ваш гвоздь;например, viewBox = "xy 1200 800" или viewBox="100 50 1200 800" говорит, что ваш "гвоздь" находится в положении 100 (x) слева и 50 (y) сверху стены.Гвоздь просто используется для измерения от для рисования.

viewBox="left top 1200 800" Теперь у нас также есть два других числа (1200, 800).Это ширина и высота нашей стены viewBox="left top width height" («область рисования» для нашего SVG по ширине (1200) и высоте (800). Таким образом, мы можем «рисовать» на нашей стене, используя систему координат x / yи наш "гвоздь" говорит нам, где начинается рисование и где верх (0) слева (0) находится в наших координатах на нашей стене. Мы можем покрасить всю стену, но где 0,0 определяется "гвоздем" (в левом верхнем углу). В вашем случае ваш гвоздь находится в левом верхнем углу (0,0 точки) на стене, так что ваша «краска числами» начинается оттуда и может пройти 1200 вправо и 800 вниз.

В соответствии с нашей концепцией здания у нас есть противоположная стена с окном, через которое мы смотрим, чтобы увидеть нашу стену SVG.

СЕЙЧАС, представьте себе нормальный CSS top: 10px; left: 100px; как то, где наш«окно» падает на нашу «стену» - верхний левый угол нашего окна настроен так, что мы видим нашу «стену svg» на 10px сверху и 100px слева и имеет наш 1200,800 размер - таксквозь ветер мы не можем видеть верхние 10 пикселей или левые 100 пикселей нашей "стены"ow.

Для моего примера кода, основанного на вашем, я установил этот CSS так, чтобы, когда вы поднимаете стену SVG на здание и просматриваете окно на противоположной стороне комнаты наших зданий, именно тамокно: 

.popper>.svgoutter {
  /*  z-index: 1000;
   width: 100%;
 height: 100%;*/
  position: fixed;
  top: 10px;
  left: 100px;
  background-color: #fff;
}

Теперь, когда у нас есть стена (SVG), прикрепленная к нашему зданию (странице), мы можем установить ее так, чтобы мы могли смотреть на нашу стену там через окно, в котором мы «держим»данное место.Я дал моему окну светло-зеленую рамку и установил размер окна так, чтобы он смотрел на нашу стену немного масштабированным, поэтому мое «окно» не видит ВСЕ стены svg, но масштабируется, в моем случае, до 70 процентов ширины и высоты. 

.svgoutter {
  border: 1px dotted lime;
  width: 70%;
  height: 70%;
}

Нажмите кнопку и увидите всплывающее окно, снова нажмите его и увидите всплывающее окно.

Обратите внимание, что я поставил свой "гвоздь" на 100,50, таккогда вы «рисуете» на стене, вы начинаете измерение с положительных чисел, заставляя вас немного «вычеркнуть» с учетом ваших координат.Если бы вы взяли все свои числа в SVG и изменили их на те 100,50 изменений, которые я внес (таким образом, 133 было бы 33 для x), вы бы увидели то же самое, что и у вас с 0,0 местоположением.

Примечание: я изменил второй пример, чтобы показать это, но чтобы получить эти значения с помощью кода, вы можете сделать что-то вроде этого: 

var svg = document.querySelector('svg.svgoutter');
var box = svg.getAttribute('viewBox');
var nums = box.split(/\s+|,/);
console.log(nums);
var bvbox = svg.viewBox.baseVal;
console.log( bvbox.x, bvbox.y, bvbox.width, bvbox.height );

Обратите внимание на объяснение того, как масштабировать представление по сравнению с изменением этих значений, которыепотребуется также изменить внутренние номера. 

//document.addEventListener("DOMContentLoaded", function() {
(function() {
  let container = document.querySelector('.chart');
  container.addEventListener('click', popOut, false);
})();
//});

function popOut() {
  let popcontainer = document.querySelector('.chart');
  let popperclass = 'popper';
  popcontainer.classList.toggle(popperclass);
  // same thing as prior line:
  /*  if (!popcontainer.classList.contains(popperclass)) {
      popcontainer.classList.add(popperclass);
    } else {
      popcontainer.classList.remove(popperclass);
    }
  */
  // var svg = document.querySelector('svg');
  var svg = document.querySelector('svg.svgoutter');
var box = svg.getAttribute('viewBox');
var nums = box.split(/\s+|,/);
console.log(nums);
var bvbox = svg.viewBox.baseVal;
console.log( bvbox.x, bvbox.y, bvbox.width, bvbox.height );
}
html {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

div {
  border: 1px solid grey;
}

body {
  height: 100%;
  font-size: 20px;
}

path {
  stroke: #000;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.container>div {
  flex: 1;
}

.row {
  display: flex;
}

.item {
  flex: 1;
  padding: 8px;
}

.chart {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  /* vertical-align: top;
  overflow: hidden;*/
}

.popper>.svgoutter {
  /*  z-index: 1000;
   width: 100%;
 height: 100%;*/
  position: fixed;
  top: 10px;
  left: 100px;
  background-color: #fff;
}

.svgoutter {
  border: 1px dotted lime;
  width: 70%;
  height: 70%;
}
<body>
  <div class="container">
    <div class="item">Div One</div>
    <div class="row">
      <div class="item chart">
        <button type="button">
      Pop Out
      </button>
        <svg class="svgoutter" preserveAspectRatio="xMinYMin meet" viewBox="100 50 1200 800"><g class="vx-group vx-tree" transform="translate(30, 37)"><g transform="matrix(1,0,0,1,0,0)"><g class="vx-group" transform="translate(0, 0)"><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path></g><g class="vx-group" transform="translate(0, 0)"><g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"><g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon></svg>
        <g class="node__plan undefined node__inactive">
          <use xlink:href="#icon-Plan"></use>
        </g>
        <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0"
            style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g>
        </g>
        </g>
        <g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"></polygon></svg>
            <g class="node__service node__active">
              <use xlink:href="#icon-Service"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
            </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line></g></svg></g>
        </g>
        <g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__service node__inactive">
              <use xlink:href="#icon-Service"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">General Accounting</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
            </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
        </g>
        <g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__service node__inactive">
              <use xlink:href="#icon-Service"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
            </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
        </g>
        <g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__activity node__inactive">
              <use xlink:href="#icon-Activity"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
            </g>0</g>
        </g>
        <g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__activity node__inactive">
              <use xlink:href="#icon-Activity"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
            </g>0</g>
        </g>
        </g>
        </g>
        </g>
        </svg>
      </div>
      <div class="item">Column two</div>
      <div class="item">Column Tree</div>
    </div>
  </div>

</body>

Альтернативный пример: здесь я изменяю 1200 800 на 400, 266.666666667 (одну треть), затем делю числа в первых двух строках на3, таким образом, эти две линии выглядят так же, как в большем масштабе. 

//document.addEventListener("DOMContentLoaded", function() {
(function() {
  let container = document.querySelector('.chart');
  container.addEventListener('click', popOut, false);
})();
//});

function popOut() {
  let popcontainer = document.querySelector('.chart');
  let popperclass = 'popper';
  popcontainer.classList.toggle(popperclass);
  // same thing as prior line:
  /*  if (!popcontainer.classList.contains(popperclass)) {
      popcontainer.classList.add(popperclass);
    } else {
      popcontainer.classList.remove(popperclass);
    }
  */
  // var svg = document.querySelector('svg');
}
html {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

div {
  border: 1px solid grey;
}

body {
  height: 100%;
  font-size: 20px;
}

path {
  stroke: #000;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.container>div {
  flex: 1;
}

.row {
  display: flex;
}

.item {
  flex: 1;
  padding: 8px;
}

.chart {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  /* vertical-align: top;
  overflow: hidden;*/
}

.popper>.svgoutter {
  /*  z-index: 1000;
   width: 100%;
 height: 100%;*/
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #fff;
}

.svgoutter {
  border: 1px dotted lime;
  width: 70%;
  height: 70%;
}
<body>
  <div class="container">
    <div class="item">Div One</div>
    <div class="row">
      <div class="item chart">
        <button type="button">
      Pop Out
      </button>
        <svg class="svgoutter" preserveAspectRatio="xMinYMin meet" viewBox="100 50 400 266.666666667><g class="vx-group vx-tree" transform="translate(30, 37)"><g transform="matrix(1,0,0,1,0,0)"><g class="vx-group" transform="translate(0, 0)"><path class="vx-link-vertical link__node" d="M63.0909090909,117.833333333C63.0909090909,58.9166666667,189.272727273,58.9166666667,189.272727273,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.272727273,117.833333333C189.272727273,176.75,189.272727273,176.75,189.272727273,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path></g><g class="vx-group" transform="translate(0, 0)"><g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"><g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon></svg>
        <g class="node__plan undefined node__inactive">
          <use xlink:href="#icon-Plan"></use>
        </g>
        <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0"
            style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g>
        </g>
        </g>
        <g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"></polygon></svg>
            <g class="node__service node__active">
              <use xlink:href="#icon-Service"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
            </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line></g></svg></g>
        </g>
        <g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__service node__inactive">
              <use xlink:href="#icon-Service"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">General Accounting</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
            </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
        </g>
        <g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__service node__inactive">
              <use xlink:href="#icon-Service"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
            </g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
        </g>
        <g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__activity node__inactive">
              <use xlink:href="#icon-Activity"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
            </g>0</g>
        </g>
        <g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
          <g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
            <g class="node__activity node__inactive">
              <use xlink:href="#icon-Activity"></use>
            </g>
            <g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
              <svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
            </g>0</g>
        </g>
        </g>
        </g>
        </g>
        </svg>
      </div>
      <div class="item">Column two</div>
      <div class="item">Column Tree</div>
    </div>
  </div>

</body>
0 голосов
/ 28 декабря 2018

Это не совсем тот ответ, который вы ожидаете, но я надеюсь, что он поможет вам улучшить ваш вопрос.

Вот что я сделал:

  1. В SVG IЯ добавил элемент <defs>, и я поместил многоугольник #thehex внутри.Затем я удалил все многоугольники в SVG и заменил их элементами <use>, используя #thehex.Также в <defs> я поместил как <symbol> zoomout__container, поскольку вам это нужно несколько раз.
  2. Чтобы уменьшить детализацию, я переместил стили в CSS.Менее подробный SVG легче читать, по крайней мере, для меня.

  3. Я заменил вложенные <svg> элементы группами или символами.

  4. В CSS я добавил vector-effect: non-scaling-stroke;, так как это позволяет избежать потери этих путей, когда SVG очень маленький.

  5. Проблема с текстом: когда SVG очень маленький, этоневозможно прочитать текст.поэтому я удаляю текст, когда элемент SVG имеет ширину менее 400 пикселей, но вы можете пересмотреть это.Существует также проблема с текстом для группы Главной книги , в этом тексте есть dy="-1em, что делает текст над шестиугольником.Вам нужно будет принять решение об этом.

  6. Также в CSS я добавил max-width: 140vh; для элемента SHG, чтобы он всегда оставался в порту просмотра.

Я не удалила ваши классы, так как думала, что они могут быть важными. 

let S = window.getComputedStyle(svg, null);
let W = parseInt(S.getPropertyValue("width"));

function init() {
  S = window.getComputedStyle(svg, null);
  W = parseInt(S.getPropertyValue("width"));
  if (W < 400) {
    svg.style.setProperty("--display", "none");
  } else {
    svg.style.setProperty("--display", "block");
  }
}

setTimeout(function() {
  init();
  addEventListener("resize", init, false);
}, 15);
svg {
  border: 1px solid;
  overflow: visible;
  max-width: 140vh;
  display: block;
  margin: 0 auto;
}
circle {
  fill: red;
}
path {
  stroke: #000;
  vector-effect: non-scaling-stroke;
}

text {
  pointer-events: none;
  text-anchor: middle;
  font-size: 25px;
  display: var(--display);
}

line {
  stroke: gold;
  stroke-width: 50;
}
<svg id="svg" viewBox="-30 -37 1200 837" style="--display:block;">
<defs><polygon  id="thehex" points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon> 
<symbol id="zoomout__container" viewBox="0 0 30 20">
    <circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle>
    <line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line>
    <line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line> 
  </symbol>
</defs>
<g class="vx-group vx-tree">

<g class="vx-group" >
             <desc>connectors</desc>
             <path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" stroke-width="1" stroke-opacity="0.2" fill="none" ></path>
             <path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
             <path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none" ></path>
             <path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
             <path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
 </g><!--connectors-->
            
<g class="vx-group">
  
<g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use> 
</g>
<g class="text">
<text class="label-down__item__name" y="48.63100051879883"><tspan x="0" dy="0em">Finance BCP</tspan></text>
<text class="label-down__item__type" y="68.63100051879883"><tspan x="0" dy="0.71em">Plan</tspan></text>
</g> 
<g class="node__plan undefined node__inactive">
<use xlink:href="#icon-Plan"></use>
</g>
</g>
</g><!--node__0-->
              
              
<g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="48.92399978637695"><tspan x="0" dy="0em">Accounts Receivable</tspan></text>
            <text class="label-down__item__type" y="68.92399978637695"><tspan x="0" dy="0.71em">Service</tspan></text>
</g>          
<g class="node__service node__active">
<use xlink:href="#icon-Service"></use>
</g>          
<use xlink:href="#zoomout__container" class="zoomout__container" x=-10 y="-10"  height="20" width="20" />                   
</g>
</g><!--node__1-->
      
              
<g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" width="150" y="48.92399978637695"><tspan>General Accounting</tspan></text>
<text class="label-down__item__type" width="150" y="68.92399978637695"><tspan dy="0.71em">Service</tspan></text></g> 
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<use xlink:href="#zoomout__container" class="zoomout__container" x=-10 y="-10"  height="20" width="20" />
</g>
</g><!--node__2-->
              
  
<g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="48.92399978637695" x="0"><tspan x="0" dy="0em">Accounts Payable</tspan></text>
<text class="label-down__item__type" width="150" y="68.92399978637695"><tspan x="0" dy="0.71em">Service</tspan></text>
</g>   
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<use xlink:href="#zoomout__container" class="zoomout__container" x=-10 y="-10"  height="20" width="20" />
</g>
</g><!--node__3-->
  
  
<g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="52.00199890136719"><tspan dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text>
<text class="label-down__item__type" y="72.00199890136719"><tspan dy="0.71em">Activity</tspan></text>
</g> 
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
</g>
</g><!--node__4-->
  
<g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use></g>
<g class="text">
<text class="label-down__item__name" width="150" y="52.00199890136719"><tspan x="0" dy="0em">Accounts Receivable</tspan></text>
<text class="label-down__item__type" width="150" y="72.00199890136719"><tspan dy="0.71em">Activity</tspan></text>
</g>  
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use></g>        
</g>
</g><!--node__5-->

</g><!--nodes-->

</g><!--tree-->
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...