इस तरह के डेमो क्यों होंगे: http://jsbin.com/ejorus/2/edit, <svg> तत्व <svg> तत्व के अंदर घोंसला है?क्यों <svg> तत्व <svg> तत्व के अंदर घोंसला?
<svg class="graph">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<g transform="translate(30,0)">
<!-- ... -->
</g>
</svg>
</svg>
जे एस बिन इस ब्लॉग पोस्ट में the demo का एक संशोधित संस्करण है: http://meloncholy.com/blog/making-responsive-svg-graphs/
तुम सही (के रूप में आप Mr. Alien's answer में कहते हैं) है कि दोनों एसवीजी तत्व एक ही सापेक्ष स्थिति है, और बिना वास्तव में ग्राफ़ ठीक बाहरी एसवीजी।
कारण मैंने इसे जोड़ा क्योंकि जावास्क्रिप्ट (जिसे मुझे स्क्वायर होने वाले लेबल को रोकने की आवश्यकता है) पाठ को असुरक्षित करने के लिए एसवीजी तत्व के transform matrix (लागू viewBox विशेषता के कारण) का उपयोग करता है।
दुर्भाग्यवश लौटा मैट्रिक्स एसवीजी तत्व पर लागू परिवर्तनों का खाता नहीं लेता है, इसलिए मुझे इसके बजाय initial coordinate system का उपयोग करने वाले बाहरी तत्व से संबंधित ट्रांसफॉर्म मैट्रिक्स प्राप्त करने की आवश्यकता है। उम्मीद है की वो मदद करदे।
नेस्टिंग एसवीजी तत्वों समूह के लिए उपयोगी हो सकता है एसवीजी एक साथ आकार, और एक संग्रह के रूप में उन्हें स्थिति। एक svg तत्व के अंदर घोंसला वाले सभी आकार
positioned (x, y) relative toposition (x, y)svg तत्व संलग्न कर रहे हैं। के x और y निर्देशांक को svg तत्व संलग्न करने से, आप सभी घोंसले वाले आकार भी ले जाते हैं।यहां एक उदाहरण है जहां दो आयतों को दो svg तत्वों के अंदर घोंसला दिया जाता है। रंगों को छोड़कर दो आयताकारों में
x, y, height, औरwidthके लिए परिभाषाएं समान हैं। संलग्न svg तत्वों में अलग-अलग x-values हैं। चूंकिx-positionआयताकारों को उनके संलग्न एसवीजी तत्वx-positionके सापेक्ष व्याख्या किया गया है, तो दो आयताकार अलग-अलग एक्स-पदों पर प्रदर्शित होते हैं।- द्वारा जैकब Jenkov
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100"
style="stroke:#009900; fill: #00cc00"/>
</svg>
</svg>
आप एक नया viewport & viewbox परिभाषित कर सकते हैं। इस विकल्प के साथ, आप relative positions जैसे css का उपयोग कर सकते हैं। अधिक जानकारी के लिए, आप यह ऑनलाइन article देख सकते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested SVG</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" />
<svg x="25%" y="25%" width="50%" height="50%">
<rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" />
</svg>
</svg>
</body>
</html>
+1 यह सहायक है। धन्यवाद! मैं अपने वेब ऐप के लिए एक अनुमोदित एसवीजी ग्राफिंग समाधान के साथ आने की कोशिश कर रहा हूं। [आपके लेख] में (http://meloncholy.com/blog/making-responsive-svg-graphs/) आप उल्लेख करते हैं [D3.js] (http://d3js.org/)। क्या आप इसे पुनः समझेंगे? मेरे पास इस विषय पर एक संबंधित प्रश्न है जहां मैं [राफेल] (http://raphaeljs.com/) का उपयोग करने की कोशिश कर रहा था: http://stackoverflow.com/questions/16848688/responsive-svg-line-graph-with- राफेल किसी भी सलाह की सराहना की जाएगी! –
डी 3 बहुत अच्छा है - यह वास्तव में शक्तिशाली और लचीला है, हालांकि इसमें काफी सीधी सीखने की वक्र है। मैं निश्चित रूप से [इसे जाने दो] (http://christopheviau.com/d3_tutorial/)। उस ने कहा, यदि आप कुछ सामान्य रूप से सामान्य चाहते हैं, तो आप अन्य ग्राफिंग पुस्तकालयों से परिणाम अधिक तेज़ी से प्राप्त कर सकते हैं। मैंने राफेल का उपयोग नहीं किया है, इसलिए उस पर टिप्पणी नहीं कर सकते। आप [इस वेब आँकड़े] पर एक त्वरित नज़र डालना भी चाहेंगे (http://meloncholy.com/blog/using-d3-for-realtime-webserver-stats/) मैंने जो चीज बनाई है (दुर्भाग्य से उत्तरदायी नहीं, लेकिन डी 3 का उपयोग करता है)। यहां एक [डेमो] है (http://bits.meloncholy.com/mt-stats)। – meloncholy