SVG에서 변환 원점을 설정하는 방법

SVG에서 변환 원점을 설정하는 방법

---

자바 펼쳐를 사용하여 SVG 문서에서 특정 요소의 크기를 조정하고 회전합니다. 문제는 기본적으로 항상 (0, 0)왼쪽 상단 의 원점 주위에 변환을한다는 것 입니다.

이 변형 기준점을 어떻게 다시 정의 할 수 있습니까?

transform-origin을 속성 사용해 보았지만 아무런 영향을 미치지 않습니다.

이것이 내가 한 방법입니다.

svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');

Firefox에서 속성이 사용 설정을 알 수 있습니다. 내가 좋아하는 일을 시도 center bottom와 50% 100%함께 괄호없이. 지금까지 아무것도 작동하지 않습니다.

누구든지 누구든지 수 있습니까?

---

광고 비용을 사용하십시오 transform="rotate(deg, cx, cy)". 여기서 deg는 회전하려는 각도이고 (cx, cy)는 회전 중심을 정의합니다.

크기 조정 / 크기 조정의 경우 (-cx, -cy)로 변환 한 다음 크기를 조정 한 다음 다시 (cx, cy)로 변환해야합니다. 작업 변환 으로이 작업을 수행 할 수 있습니다 .

transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"

여기서 sx는 x 축의 배율 인수이고 y 축의 sy입니다.

---

고정 값 ( "center"또는 "50 %"아님)을 사용할 수있는 경우 대신 CSS를 사용할 수 있습니다.

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

Firefox와 같은 일부 브라우저는 상대 값을 처리하지 않습니다.

---

나와 같고 transform-origin으로 이동 한 다음 확대 / 축소 조금 더 필요합니다.

// <g id="view"></g>
var view = document.getElementById("view");

var state = {
  x: 0,
  y: 0,
  scale: 1
};

// Origin of transform, set to mouse position or pinch center
var oX = window.innerWidth/2;
var oY = window.innerHeight/2;

var changeScale = function (scale) {
  // Limit the scale here if you want
  // Zoom and pan transform-origin equivalent
  var scaleD = scale / state.scale;
  var currentX = state.x;
  var currentY = state.y;
  // The magic
  var x = scaleD * (currentX - oX) + oX;
  var y = scaleD * (currentY - oY) + oY;

  state.scale = scale;
  state.x = x;
  state.y = y;

  var transform = "matrix("+scale+",0,0,"+scale+","+x+","+y+")";
  //var transform = "translate("+x+","+y+") scale("+scale+")"; //same
  view.setAttributeNS(null, "transform", transform);
};

여기에서 작동합니다 : http://forresto.github.io/dataflow-prototyping/react/

---

matrix변환 을 사용하지 않고 크기를 조정 비용 :

transform="translate(cx, cy) scale(sx sy) translate(-cx, -cy)"

그리고 여기 CSS에 있습니다.

transform: translate(cxpx, cypx) scale(sx, sy) translate(-cxpx, -cypx)

---

비슷한 문제가있었습니다. 하지만 D3 를 사용하여 요소의 위치를 ​​지정 하고 CSS 에서 변환 및 전환 을 처리하기를 원했습니다 . 이것은 Chrome 65에서 작업 한 원래 코드입니다.

//...
this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('transform-origin', (d,i)=> `${valueScale(d.value) * Math.sin( sliceSize * i)} 
                                     ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)}`)
//... etc (set the cx, cy and r below) ...

이 날이 설정할 수 cx, cy및 transform-origin동일한 데이터를 이용하여 자바 스크립트 값.

그러나 이것은 Firefox에서 작동하지 않았습니다! 내가해야 할 일은 위와 동일한 위치 지정 공식을 사용하여 태그를 감싸는 것 circle입니다 . 그런 다음 태그 에 를 추가 하고 및 값을 . 거기에서 예상대로 중앙에서 확장됩니다. 최종 코드는 다음과 같습니다.gtranslatecirclegcxcy0transform: scale(2)

this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('g')
  .attrs({
    class: d => `dot ${d.metric}`,
    transform: (d,i) => `translate(${valueScale(d.value) * Math.sin( sliceSize * i)} ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)})`
  })
  .append('circle')
  .attrs({
    r: this.opts.dotRadius,
    cx: 0,
    cy: 0,
  })

이 변경을 한 후, 나는 대상으로 내 CSS 변경 circle대신의 .dot을 추가를 transform: scale(2). 나는 심지어 사용할 필요도 없었다 transform-origin.

메모:

1. d3-selection-multi두 번째 예에서 사용 하고 있습니다. 이를 통해 모든 속성에 대해 .attrs반복 하는 대신 객체를 전달할 수 있습니다 .attr.

2. 문자열 템플릿 리터럴을 사용하는 경우 첫 번째 예에 설명 된대로 줄 바꿈에 유의하십시오. 이것은 출력에 개행을 포함하고 코드를 손상시킬 수 있습니다.

참고 URL : https://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg