SVG'de dönüşüm kaynağı nasıl ayarlanır

Javascript kullanarak SVG belgesindeki belirli öğeleri yeniden boyutlandırmam ve döndürmem gerekiyor. Sorun, varsayılan olarak, dönüşümü her zaman (0, 0)sol üstteki orijinin etrafına uygulamasıdır .

Bu dönüşüm bağlantı noktasını nasıl yeniden tanımlayabilirim?

transform-originÖzniteliği kullanmayı denedim , ancak hiçbir şeyi etkilemiyor.

Ben böyle yaptım:

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

Firefox'ta özniteliğin doğru şekilde ayarlandığını görebilmeme rağmen, ana noktayı belirttiğim noktaya ayarlamıyor gibi görünüyor. Gibi şeyler denedim center bottomve 50% 100%ile ve parantez olmadan. Şimdiye kadar hiçbir şey işe yaramadı.

Biri yardım edebilir mi?

Döndürmek için transform="rotate(deg, cx, cy)", burada derece döndürmek istediğiniz derecedir ve (cx, cy) dönüş merkezini tanımlar.

Ölçekleme / yeniden boyutlandırma için, (-cx, -cy) ile çevirmeniz, ardından ölçeklendirmeniz ve ardından (cx, cy) 'ye geri çevirmeniz gerekir. Bunu bir matris dönüşümü ile yapabilirsiniz :

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

Burada sx, x ekseninde ölçekleme faktörü, y ekseninde sy.

Sabit bir değer kullanabiliyorsanız ("merkez" veya "% 50" değil), bunun yerine CSS kullanabilirsiniz:

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

Bazı tarayıcılar (Firefox gibi) göreli değerleri doğru şekilde işlemez.

Siz de benim gibiyseniz ve yatay kaydırmak ve ardından dönüşüm orijini ile yakınlaştırmak istiyorsanız, biraz daha fazlasına ihtiyacınız olacak.

// <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);
};

İşte çalışıyor: http://forresto.github.io/dataflow-prototyping/react/

matrixDönüşümü kullanmak zorunda kalmadan ölçekleme için :

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

Ve işte CSS'de:

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

Görünüşe göre burada hepimiz bir numara kaçırdık: transform-box: fill-box

kullanmak transform-box: fill-box, bir SVG içindeki bir öğenin normal bir HTML öğesi gibi davranmasını sağlar. Daha sonra transform-origin: centernormalde yaptığınız gibi başvurabilirsiniz (veya başka bir şey)

bu doğru, transform-box: fill-boxkarmaşık matris maddelerine gerek yok

Benzer bir sorun yaşadım. Ancak öğelerimi konumlandırmak için D3 kullanıyordum ve dönüşüm ve geçişin CSS tarafından ele alınmasını istedim . Bu, Chrome 65'te çalıştığım orijinal kodumdu:

//...
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) ...

Bu beni ayarlamalarına izin cx, cyve transform-originaynı verileri kullanarak javascript değerleri.

AMA bu Firefox'ta işe yaramadı! Ne yapmak zorunda sarmak oldu circleyılında getiketi ve translatebunun yukarıdan aynı konumlandırma formülü kullanarak. Sonra eklenen circleiçinde getiketi ve onun set cxve cydeğerleri 0. Oradan, transform: scale(2)beklendiği gibi merkezden ölçeklenir. Son kod şuna benziyordu.

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,
  })

Bu değişikliği yaptıktan sonra, hedeflediğim benim CSS değişti circleyerine .doteklemek için, transform: scale(2). Kullanmaya bile ihtiyacım yoktu transform-origin.

NOTLAR:

1. Ben kullanıyorum d3-selection-multiİkinci örnekte. Bu, her öznitelik için .attrsyinelemek yerine bir nesneyi iletmeme izin veriyor .attr.

2. Bir dize şablonu hazır bilgisi kullanırken, ilk örnekte gösterildiği gibi satır sonlarına dikkat edin. Bu, çıktıda bir satırsonu içerir ve kodunuzu bozabilir.