Изменить систему координат, поворачивая ось X (начало в верхнем правом углу) - PullRequest
Новая
       61

Изменить систему координат, поворачивая ось X (начало в верхнем правом углу)

0 голосов
/ 30 сентября 2018

Я ищу простой способ заставить систему координат в данном элементе svg начинать с верхнего правого угла вместо верхнего левого.Это означает, что ось X перевернута, поэтому увеличение атрибута x элемента переводит его дальше влево, а увеличение атрибута y переводит его дальше вниз, как обычно.

поэкспериментировал с scale и viewBox, однако:

  • scale почти решает проблему, но на самом деле это не работает для моего варианта использования, поскольку он также переворачивает текст, который я

This question говорит, что решает ту же проблему для оси Y с преобразованием matrix.Я оглянулся и попытался вычислить эквивалент для оси X, но безуспешно.

Вот пример того, чего я пытаюсь достичь: 

<svg style="border: 1px black solid;" height="100%" width="100%">
  <g>
    <g>
      <rect fill="#F0BC40" width="70" height="12" x="0" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="35" y="29">7</text>
    </g>
    <g>
      <rect fill="orange" width="50" height="12" x="72" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="97" y="29">5</text>
    </g>
    <g>
      <rect fill="orange" width="40" height="12" x="124" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="144" y="29">4</text>
    </g>
    <g>
      <rect fill="red" width="50" height="12" x="166" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="191" y="29">5</text>
    </g>
      <rect fill="#52575E" width="2" height="16" x="70" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="122" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="164" y="28"></rect>
    </g>
  </svg>

Как вы можете видеть, я бы хотел, чтобы этот сгруппированный столбец отображался справа, а красный столбец был бы самым дальним слева (поэтому, по сути, столбец с накоплением будетбыть перевернутым)

Также я делаю это в Elm, поэтому я не могу получить доступ к DOM, чтобы проверить ширину, высоту или координаты элементов (я вычисляю все функционально).

Если бы кто-нибудь мог помочь мне достичь этого, я был бы очень благодарен.

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Как вы сказали, scale "почти работает".Вы можете снова использовать scale, чтобы разблокировать text.Используйте вложенные преобразования для правильной работы переворачивания style с горизонтальным размещением text.Если вы хотите переключиться обратно на незафиксированную версию, просто измените -1 в scale на 1 (или избавьтесь от transform в переворачивании style). 

<head>
  <style TYPE="text/css">
  <!--
  .flipped {
    transform: scale(-1,1);
  }
  -->
  </style> 
</head>
<svg class=flipped style="border: 1px black solid;" height="100%" width="100%">
  <g>
    <g>
      <rect fill="#F0BC40" width="70" height="12" x="0" y="30"></rect>
      <g transform="translate(35,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >7</text>
        </g>
      </g>
    </g>
    <g>
      <rect fill="orange" width="50" height="12" x="72" y="30"></rect>
      <g transform="translate(97,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >5</text>
        </g>
      </g>
    </g>
    <g>
      <rect fill="orange" width="40" height="12" x="124" y="30"></rect>
      <g transform="translate(144,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >4</text>
        </g>
      </g>
    </g>
    <g>
      <rect fill="red" width="50" height="12" x="166" y="30"></rect>
      <g transform="translate(191,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >5</text>
        </g>
      </g>
    </g>
    <rect fill="#52575E" width="2" height="16" x="70" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="122" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="164" y="28"></rect>
  </g>
</svg>
0 голосов
/ 30 сентября 2018

Я бы подумал об этом, нарисовав ваши бары с x = "0" влево, а затем установив viewBox с отрицательным значением x и шириной, которая позволяет ему заканчиваться на x = "0".

Для текстовых элементов добавьте знак минус к значению x.Для ректов установите значение x как x -> -x - width.

. Определите значение viewBox таким образом, чтобы наименьшее значение x все еще было внутри или что-либо еще подходящее. 

<svg style="border: 1px black solid;" height="100%" width="100%" viewBox="-500 0 500 100">
  <g>
    <g>
      <rect fill="#F0BC40" width="70" height="12" x="-70" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-35" y="29">7</text>
    </g>
    <g>
      <rect fill="orange" width="50" height="12" x="-122" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-97" y="29">5</text>
    </g>
    <g>
      <rect fill="orange" width="40" height="12" x="-164" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-144" y="29">4</text>
    </g>
    <g>
      <rect fill="red" width="50" height="12" x="-216" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-191" y="29">5</text>
    </g>
    <rect fill="#52575E" width="2" height="16" x="-72" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="-124" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="-166" y="28"></rect>
  </g>
</svg>

Это масштабирует текст и столбцы;если вам нужно этого избежать, есть хитрость.Вы можете окружить содержимое двумя <svg> элементами и использовать внутренний, чтобы переместить все на 100% вправо.overflow="visible" (или style="overflow:visible") гарантирует, что контент виден, хотя формально он находится вне области просмотра внутреннего <svg>. 

<svg style="border: 1px black solid;" height="100%" width="100%">
  <svg x="100%" overflow="visible">
    <g>
      <g>
        <rect fill="#F0BC40" width="70" height="12" x="-70" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-35" y="29">7</text>
      </g>
      <g>
        <rect fill="orange" width="50" height="12" x="-122" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-97" y="29">5</text>
      </g>
      <g>
        <rect fill="orange" width="40" height="12" x="-164" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-144" y="29">4</text>
      </g>
      <g>
        <rect fill="red" width="50" height="12" x="-216" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-191" y="29">5</text>
      </g>
      <rect fill="#52575E" width="2" height="16" x="-72" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="-124" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="-166" y="28"></rect>
    </g>
  </svg>
</svg>
...