Как вращать div без использования «transform»?

Question

Я использую расширение из библиотеки SVG для рисования внутри div (https://sggjs.com/svg.draw.js/). Однако, его можно вращать, используя «transform». Поворот является только визуальным, оставляя X и Yоси изображения не изменяются, в результате чего «svg.draw» рисует неправильные координаты при повороте. Как я могу вращаться, изменяя его оси, чтобы не отставать от поворота и получить правильные точки для рисования на том же повернутом div? Спасибо.

Редактировать: Добавление кода.

Функция для рисования:

drawImage = function (pointsRelative) {
        var pointsToDraw = $scope.getAbsolutePoints(pointsRelative)
        pointsToDraw = pointsToDraw.join()

        var draw = SVG('cutImage').size('100%', '100%')

        draw.polygon(pointsToDraw).attr({
            fill: '#3d7e9a',
            'fill-opacity': 0.4,
            stroke: '#3d7e9a',
            'stroke-width': 1
        })
    }

Функция для получения точек, созданных с помощью мыши, и преобразования в относительные точки:

getRelativePoints = function (clickPoints) {
        let conv = []
        for (let item of clickPoints) {
             let x = item[0] / parseInt(widthImage)
             let y = item[1] / parseInt(heigthImage)
             conv.push([x, y])
        }
        return conv
    }

Функция для получения относительных точек и преобразования в абсолютные точки для рисованного изображения:

getAbsolutePoints = function (clickPoints) {
        let conv = []
        for (let item of clickPoints) {
            let x = item[0] * parseInt(widthImage)
            let y = item[1] * parseInt(heigthImage)
            conv.push([x, y])
        }
        return conv
    }

Пример HTML: <div id="cutImage" style="width: 300px; height: 800px;"></div>

Когда я добавляю transform rotate 90deg, div diplay,но ваши ширина и рост остаются прежними.

Answer 1

Я думаю, проблема в том, как вы получаете очки, созданные с помощью мыши. В следующем примере я рисую элемент svg внутри повернутого элемента div (#wrap). Когда вы нажимаете на элемент svg, вы получаете положение мыши на консоли. Хотя div вращается, позиция мыши находится там, где она должна быть на холсте svg:

Надеюсь, это поможет.

function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}


svg.addEventListener("click",(e)=>{
  let m = oMousePosSVG(e)
  console.log(m.x,m.y);  
})

svg{border:1px solid}

#wrap{
  margin:auto;
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  width:200px;
  height:200px;
  transform: rotate(45deg);  
}

<div id="wrap">
<svg id="svg" viewBox="0 0 200 200">
</svg>
</div>