एसवीजी तत्वों को एक निश्चित आकार में रखते हुए स्थिति स्केल

Question

पृष्ठभूमि और स्थिति निर्देशांक बदलते समय मैं टेक्स्ट या ऑब्जेक्ट्स को एक निश्चित आकार में कैसे रख सकता हूं? उदाहरण के लिए:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    width="100%" height="100%" 
    viewBox="0 0 50000 50000" 
    > 
    <circle cx="25000" cy="25000" r="100px" fill="red" /> 
</svg> 

इस कोड में, वृत्त 100 पिक्सल नहीं होगा, यह viewbox आकार के अनुसार बदल दिया जाएगा, तो यह छोटे हो जाएगा।

यह समस्या नक्शे में प्रकट होती है, उदाहरण के लिए। जब आप नक्शे पर ज़ूम इन और आउट करते हैं तो आप चाहते हैं कि डॉट एक शहर के स्थान का प्रतिनिधित्व करे और लेबल एक ही आकार में रहने के लिए, उपयोगकर्ता ज़ूम होने पर बड़ा या छोटा न हो।

Answer 1

दृश्य के विपरीत लागू करें त्रिज्या के लिए बॉक्स स्केल उदा।

var circle = document.getElementById('c'); 
 
var root = document.getElementById('root'); 
 
var matrix = circle.getCTM(); 
 
circle.r.baseVal.value /= matrix.a;

<svg id="root" xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 50000 50000" 
 
    > 
 
    <circle id="c" cx="25000" cy="25000" r="100px" fill="red" /> 
 
</svg>

और अगर मैं दोगुना viewBox चक्र को महत्व देता है एक ही आकार रहता है।

var circle = document.getElementById('c'); 
 
var root = document.getElementById('root'); 
 
var matrix = circle.getCTM(); 
 
circle.r.baseVal.value /= matrix.a;

<svg id="root" xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 100000 100000" 
 
    > 
 
    <circle id="c" cx="25000" cy="25000" r="100px" fill="red" /> 
 
</svg>

आप ताकि आप मैट्रिक्स एक और घ मूल्यों से अलग से x और y पैमाने पर कर सकते हैं एक अंडाकार का उपयोग कर सकते हैं।

Answer 2

vector-effect="non-scaling-stroke" संपत्ति लाइनों पर स्केलिंग अक्षम करता है। एक ही स्थान पर शुरू और बंद होने के साथ राउंड सिरों के साथ एक रेखा खींचना एक सर्कल का उत्पादन करेगा।

यह केवल आकार के लिए अच्छा है कि stroke-linecap हालांकि उत्पादन कर सकता है। हो सकता है कि इसमें कम ओवरहेड हो और यदि नहीं, कम से कम यह आसान है। मैं उबंटू 14.04 पर क्रोमियम संस्करण 45.0.2454.101 के साथ svg-pan-zoom लाइब्रेरी का उपयोग कर रहा हूं।

<line x1="250" x2="250" y1="250" y2="250" stroke-width="5" 
stroke="rgb(0,0,0)" stroke-linecap="round" vector-effect="non-scaling-stroke"/>