При обновлении преобразования SVG-элемента Firefox перемещает путь клипа, а Chromium - нет, что правильно, а что является переносимым решением? - PullRequest
Новая
       12

При обновлении преобразования SVG-элемента Firefox перемещает путь клипа, а Chromium - нет, что правильно, а что является переносимым решением?

0 голосов
/ 25 апреля 2019

Firefox и Chromium ведут себя по-разному при обновлении преобразования ограниченного элемента SVG.Firefox перемещает путь клипа, а Chromium - нет.

Пример кода: 

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title></title>
  </head>
  <body>
    <button id='button'>Click to translate</button>
    <br/>
    <svg width='500px' height='500px'>
      <g clip-path='polygon(0 0, 50 0, 50 50, 0 50)'>
        <g transform='translate(25 25)' id='group'>
          <rect x='0' y='0' width='50' height='50' fill='red'></rect>
        </g>
      </g>
    </svg>
    <script>
      var b = document.getElementById('button');
      var g = document.getElementById('group');
      b.onclick = function(event) {
          g.setAttribute('transform', 'translate(0, 0)');
      };
    </script>
  </body>
</html>

JSFiddle: https://jsfiddle.net/TheAspiringHacker/w7ymfn3s/1/

Внешний элемент g отсечен в соответствии сквадрат с длинами сторон 50. Чтобы определить, по каким координатам разместить обтравочный многоугольник, кажется, что браузер находит верхний левый угол прямоугольника, содержащего контент для рендеринга.Поскольку существует внутренний g переведенный элемент (25, 25), содержащий rect в (0, 0), обрезной полигон размещается в (25, 25).

При нажатии кнопкипреобразование внутреннего g элемента изменяется таким образом, что оно находится в точке (0, 0).

Firefox и Chromium ведут себя по-разному при нажатии кнопки.В Firefox местоположение пути клипа соответственно изменяется, чтобы соответствовать новому положению прямоугольника.В Chromium это не так, в результате чего часть прямоугольника обрезается.Я протестировал код с Firefox 66.0.2 и Chromium 73.0.3683.86.

Какое поведение является правильным в соответствии со спецификацией?

Я хочу обрезать элемент, который я программно перевожу,Учитывая, что Firefox и Chromium, похоже, ведут себя по-разному, какие есть решения для меня, чтобы получить что-то, что работает кросс-браузерно?

1 Ответ

1 голос
/ 25 апреля 2019

Я бы сначала определил clipPath: 

<clipPath id="poly">
   <polygon points="0 0, 50 0, 50 50, 0 50"></polygon>
</clipPath>

затем примените его к группе: 

 <g clip-path="url(#poly)">


var b = document.getElementById('button');
      var g = document.getElementById('group');
      b.onclick = function(event) {
          g.setAttributeNS(null,'transform', 'translate(0, 0)');
      };
svg{border:1px solid}
    <button id='button'>Click to translate</button>
    <br/>
    <svg width='500px' height='500px'>
    <clipPath id="poly">
      <polygon points="0 0, 50 0, 50 50, 0 50"></polygon>
    </clipPath>
    <g clip-path="url(#poly)">
        <g transform='translate(25 25)' id='group'>
          <rect x='0' y='0' width='50' height='50' fill='red'></rect>
        </g>
      </g>
      

    </svg>
...