सवाल एसवीजी में ट्रांसफॉर्म उत्पत्ति कैसे सेट करें


मुझे जावास्क्रिप्ट का उपयोग करके एसवीजी दस्तावेज़ में कुछ तत्वों का आकार बदलने और घुमाए जाने की आवश्यकता है। समस्या यह है कि, डिफ़ॉल्ट रूप से, यह हमेशा मूल के चारों ओर परिवर्तन को लागू करता है (0, 0) - बाएं से बाएं।

मैं इस ट्रांसफॉर्म एंकर पॉइंट को फिर से परिभाषित कैसे कर सकता हूं?

मैंने इसका उपयोग करने की कोशिश की transform-origin विशेषता है, लेकिन यह कुछ भी प्रभावित नहीं करता है।

मैंने इस तरह से इसे किया:

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

ऐसा लगता है कि मैंने निर्दिष्ट बिंदु पर मुख्य बिंदु सेट नहीं किया है, हालांकि मैं फ़ायरफ़ॉक्स में देख सकता हूं कि विशेषता सही ढंग से सेट है। मैंने चीजों की तरह कोशिश की center bottom तथा 50% 100% बिना और बिना ब्रांड्स के। अभी तक कुछ भी काम नहीं किया।

क्या कोई मदद कर सकता है?


74
2017-07-15 18:29


मूल


एफडब्ल्यूआईडब्ल्यू, माना जाता है कि फ़ायरफ़ॉक्स 1 9 बीटा 3 के रूप में तय किया गया है, हालांकि मुझे अभी भी फ़ायरफ़ॉक्स 22 में समस्याएं आ रही हैं। मोज़िला बगजिला सूची: bugzilla.mozilla.org/show_bug.cgi?id=828286 - Toph


जवाब:


उपयोग घुमाने के लिए transform="rotate(deg, cx, cy)", जहां डिग्री वह डिग्री है जिसे आप घूमना चाहते हैं और (सीएक्स, साइ) घूर्णन के केंद्र को परिभाषित करता है।

स्केलिंग / आकार बदलने के लिए, आपको (-cx, -cy) द्वारा अनुवाद करना होगा, फिर स्केल करें और फिर वापस अनुवाद करें (सीएक्स, साइ)। आप इसे एक के साथ कर सकते हैं मैट्रिक्स परिवर्तन:

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

जहां एसएक्स एक्स-अक्ष में स्केलिंग कारक है, वाई-अक्ष में sy।


118
2017-07-15 23:16



बहुत बहुत धन्यवाद। घुमाएं काम पूरी तरह से सोचते हैं, लेकिन स्केलिंग / आकार बदलना हमेशा कुछ यादृच्छिक राशि से समाप्त होता है। मैंने मैट्रिक्स का उपयोग करने की कोशिश की और उन्हें अलग से "अनुवाद (सीएक्सएसएक्स, साइsy) स्केल (एसएक्स, सीआई) "। वही परिणाम। - Charlemagne
यह ट्रांसफॉर्म नहीं होगा = "मैट्रिक्स (एसएक्स, 0, 0, सीई, सीएक्स-एसएक्ससीएक्स, साइ-सीcy) "? क्योंकि आप केवल अंतर से अनुवाद करना चाहते हैं। मुझे लगता है कि यह तर्क सही है, लेकिन यह अभी भी मुझे पद छोड़ देता है ... - Charlemagne
अब यह काम कर रहा है! मैं सिर्फ गलत सीएक्स और साइ मूल्यों का उपयोग कर रहा था! आपका बहुत बहुत धन्यवाद! - Charlemagne
@JayStevens हां, मैट्रिक्स ट्रांसफॉर्म किसी भी सिस्टम के लिए काम करेगा, यह सिर्फ गणित है। केवल अंतर ही संकेत हो सकता है। जहां तक ​​मैं कह सकता हूं, सीएसएस मैट्रिक्स ट्रांसफॉर्म एसवीजी के लिए एक ही नोटेशन का उपयोग करता है, इसलिए उस क्रम में छः संख्याओं को काम करना चाहिए। - Peter Collingridge
बस स्पष्ट करने के लिए, सीएक्स और साइ के ऑफसेट होने की आवश्यकता है केंद्र आपके स्केलिंग बॉक्स में। यह मुझे थोड़ी देर के लिए फिसल गया, क्योंकि मैं सीएसएस बॉक्स मॉडल में सोच रहा था। @forresto नीचे दिए गए अपने जवाब में इसका संकेत देता है। - Jason Farnsworth


यदि आप एक निश्चित मान ("केंद्र" या "50%" नहीं) का उपयोग कर सकते हैं, तो आप इसके बजाय सीएसएस का उपयोग कर सकते हैं:

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

कुछ ब्राउज़र (फ़ायरफ़ॉक्स की तरह) सापेक्ष मूल्यों को सही तरीके से संभाल नहीं पाएंगे।


14
2017-09-01 17:53



वाह। अगर मैं कर सकता तो +10 होगा। यह मेरा दिन बचाया! धन्यवाद। - Cullub


यदि आप मेरे जैसे हैं और पैन करना चाहते हैं और फिर ट्रांसफॉर्म-उत्पत्ति के साथ ज़ूम करना चाहते हैं, तो आपको थोड़ा और आवश्यकता होगी।

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


10
2018-01-08 12:47



आपका जिथब लिंक 404 एस - NuclearPeon
@NuclearPeon धन्यवाद, तय। - forresto


उपयोग किए बिना स्केलिंग के लिए matrix परिवर्तन:

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

और यहां यह सीएसएस में है:

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

2
2018-04-01 02:09





मेरा मुद्दा भी ऐसा ही था। लेकिन मैं उपयोग कर रहा था डी 3 मेरे तत्वों को स्थापित करने के लिए, और चाहता था परिवर्तन तथा संक्रमण सीएसएस द्वारा संभाला जा सकता है। यह मेरा मूल कोड था, जिसे मैं क्रोम 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 एक ही डेटा का उपयोग कर जावास्क्रिप्ट में मूल्य।

लेकिन यह फ़ायरफ़ॉक्स में काम नहीं किया! मुझे क्या करना था था circle में g टैग और translate यह उपरोक्त से एक ही स्थिति निर्धारण सूत्र का उपयोग कर रहा है। मैंने फिर जोड़ा circle में g टैग करें, और इसे सेट करें cx तथा cy मूल्य 0। वहां से, transform: 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,
  })

इस बदलाव के बाद, मैंने अपना सीएसएस को लक्षित करने के लिए बदल दिया circle के स्थान पर .dotजोड़ने के लिए transform: scale(2)। मुझे उपयोग की भी आवश्यकता नहीं थी transform-origin

टिप्पणियाँ: 

  1. मै इस्तेमाल कर रहा हूँ d3-selection-multi दूसरे उदाहरण में। यह मुझे एक वस्तु को पारित करने की अनुमति देता है .attrs दोहराने के बजाय .attr हर विशेषता के लिए।

  2. एक स्ट्रिंग टेम्पलेट शाब्दिक का उपयोग करते समय, पहले उदाहरण में चित्रित लाइन-ब्रेक के बारे में जागरूक रहें। इसमें आउटपुट में एक नई लाइन शामिल होगी और आपका कोड तोड़ सकता है।


0
2018-03-21 17:51



शायद अगर आप ट्रांसफॉर्म-बॉक्स सेट करते हैं: fill-box; फ़ायरफ़ॉक्स जिस तरह से आप चाहते थे काम किया होगा। - Robert Longson
कोशिश की काम नहीं लग रहा था। यह किया काम करने के बाद काम किया svg:transform-origin.enabled फ़ायरफ़ॉक्स में pref about:config पृष्ठ। लेकिन ... यह एक पर्याप्त समाधान की तरह प्रतीत नहीं हुआ। मुझे बीच में एक विसंगति भी मिली transform-origin: 50% 50% तथा transform-origin: center center। - Jamie S
svg.transform-origin.enabled pref कई संस्करणों को पहले हटा दिया गया था। जब तक आप एक बहुत पुराने संस्करण का उपयोग नहीं कर रहे हैं, तब तक 50% और केंद्र के बीच कोई अंतर नहीं होना चाहिए। फ़ायरफ़ॉक्स 59 या बाद में कोई फर्क पड़ता है तो बगजिला बग बढ़ाने के लिए स्वतंत्र महसूस करें। - Robert Longson