Таблица SVG «Свернуть» на экранах против сетчатки и без сетчатки - PullRequest
Новая
       19

Таблица SVG «Свернуть» на экранах против сетчатки и без сетчатки

0 голосов
/ 11 февраля 2019

Я использую данные для рендеринга таблиц и диаграмм на основе SVG в браузере (используя Snap.js).Все выглядит нормально на экране без сетчатки, но когда я перемещаю окно браузера, содержащее таблицу, на экран сетчатки, таблица выходит за пределы родительского контейнера.

Из того, что я могу сказать, это должно сделатьс самим дисплеем и тем, как браузер взаимодействует с ним, , а не CSS (я пробовал использовать разные значения положения для родителя и ребенка, но безрезультатно… и он уже отлично работает на не сетчатке).

Non-retina: Таблица выглядит нормально

Retina: Таблица вне родительского контейнера

Пример разметки SVG: 

<svg class="pond" width="800px" height="100%"><desc>Created with Snap</desc><defs></defs><g class="pond-container"><rect x="0" y="0" width="800px" height="100%" fill="#ffffff" stroke="rgba(0,0,0,0)" style="stroke-width: 0;" class="pond-container "></rect>

    <g id="pond_widget_250" class="widget-translator widget-droppable" transform="matrix(1,0,0,1,478,330)"><g stroke="none" fill="rgba(0,0,0,0)" style="stroke-width: 0;" class="pond-widget widget-container pond-widget-group "><rect x="0" y="0" width="302" height="49" rx="0" ry="0" class="pond-widget pond-widget-rect "></rect></g><g id="pond_widget_251" class="widget-translator widget-droppable" transform="matrix(1,0,0,1,4,4)"><g stroke="#008eda" fill="#dbeffa" style="stroke-width: 1;" class="widget-container customized"><rect x="0" y="0" width="294" height="41" rx="0" ry="0" stroke="#008eda" fill="#dbeffa" style="stroke-width: 1px; stroke-dasharray: none;" class="pond-widget pond-widget-rect "></rect></g></g><g id="pond_widget_252" class="widget-translator " transform="matrix(1,0,0,1,70,20.0001)"><g stroke="#008eda" fill="#dbeffa" style="stroke-width: 1;" class="widget-container customized"><text x="0" y="0" stroke="none" fill="#008eda" style="stroke-width: 1px; stroke-dasharray: none; font-size: 14px; font-weight: 900; alignment-baseline: hanging; text-anchor: start;" class="pond-widget pond-widget-text ">Table Should Appear Below</text></g></g></g><g id="pond_widget_256" class="widget-translator " transform="matrix(1,0,0,1,481,403)"><g stroke="null" fill="rgba(0,0,0,0)" style="stroke-width: 1;" class="widget-container customized" id="table_255"><rect x="0" y="0" width="295" height="352.0000305175781" rx="0" ry="0" stroke="null" fill="rgba(0,0,0,0)" style="stroke-width: 1px; stroke-dasharray: none;" class="pond-widget pond-widget-rect "></rect>
<foreignObject width="295px" height="352.0000305175781px" style="
    position: relative !important;
">

  <div class="rt--view rt-table-view" xmlns="http://www.w3.org/1999/xhtml" style="left: 0;bottom: 0;" contentscalefactor="1.0">
    <div class="grid-header" style="
    float: none;
">


        <span class="col col-0 equip_name cols-2">
          <span>Equip Name</span>



        </span>

        <span class="col col-1 value cols-2">
          <span>Value</span>



        </span>
       <!-- end for -->

    </div>

      <div class="grid-body" style="
    float: none;
">


        <div class="grid-row row-0">

          <span class="col col-0 equip_name cols-2">
            AC-03 2nd Flr South
          </span>

          <span class="col col-0 value cols-2">
            37500
          </span>

        </div>

        <div class="grid-row row-1">

          <span class="col col-1 equip_name cols-2">
            AC-06 Dining
          </span>

          <span class="col col-1 value cols-2">
            31200
          </span>

        </div>

        <div class="grid-row row-0">

          <span class="col col-2 equip_name cols-2">
            AC-01 1st Flr South
          </span>

          <span class="col col-2 value cols-2">
            38700
          </span>

        </div>

        <div class="grid-row row-1">

          <span class="col col-3 equip_name cols-2">
            AC-05 Tailor Shop
          </span>

          <span class="col col-3 value cols-2">
            41100
          </span>

        </div>

        <div class="grid-row row-0">

          <span class="col col-4 equip_name cols-2">
            AC-04 2nd Flr North
          </span>

          <span class="col col-4 value cols-2">
            39600
          </span>

        </div>

        <div class="grid-row row-1">

          <span class="col col-5 equip_name cols-2">
            AC-07 Kitchen
          </span>

          <span class="col col-5 value cols-2">
            56100
          </span>

        </div>

        <div class="grid-row row-0">

          <span class="col col-6 equip_name cols-2">
            AC-02 1st Flr North
          </span>

          <span class="col col-6 value cols-2">
            39000
          </span>

        </div>

        <div class="grid-row row-1">

          <span class="col col-7 equip_name cols-2">
            AC-08 MC Room
          </span>

          <span class="col col-7 value cols-2">
            85500
          </span>

        </div>


      <!-- hidden rows -->

        <div class="hidden-rows-count">32 more row(s) hidden</div>
        <!-- end if hidden -->

      </div>
     <!-- end if data.length -->

  </div>

</foreignObject>
</g></g></g></svg>
...