मैं जावास्क्रिप्ट

Question

के बिना एसवीजी के साथ उपयोग किए जाने वाले सीएसएस में "शीर्षक" (टूलटिप, पॉप-अप, alt-text) कैसे बना सकता हूं, इसमें "शीर्षक" विशेषता के साथ पॉप-अप बनाना बहुत आसान है एसवीजी। लेकिन आप सीएसएस के साथ एक ही प्रभाव कैसे प्राप्त करते हैं।

यह एक उदाहरण के लिए है जो मैं विकिमीडिया के लिए बना रहा हूं और मैं अधिकतर चीजों को रखने के लिए प्रयास करता हूं, अन्य विकिपीडिया एक एम्बेडेड स्टाइलशीट के भीतर सही करना चाहते हैं, वास्तविक जीवन विषय द्वारा समूहीकृत शैली गुणों के साथ। अधिकांश विकिपीडिया संपादक कंप्यूटर अशिक्षित होते हैं, आप उम्मीद नहीं कर सकते कि वे अपने संशोधनों को बनाने के लिए बहुत सारे कोड का शिकार कर सकें और यदि उन्हें कोड के भीतर सरल सीएसएस-मूल्यों के अलावा कुछ भी बदलना है, तो आपको शायद इससे एक गड़बड़ हो जाएगी । अगर मैं इसे अपने खराब दिमागों के लिए कठिन बना देता हूं, तो जल्दी या बाद में कोई व्यक्ति इंकस्केप, इलस्ट्रेटर या कुछ अन्य समान रूप से भयानक वेक्टर संपादक का उपयोग करके फ़ाइल को अनजान कर देगा।

मैं जावास्क्रिप्ट का उपयोग कर सकता हूं, लेकिन इससे चित्रण कम सुलभ हो जाएगा और कोड को संपादित करने की आवश्यकता वाले लोगों के लिए कोड को और भी भ्रमित कर देगा। इसके अलावा, जावास्क्रिप्ट का उपयोग कर कुछ एसवीजी-फाइलों को विकीमीडिया से हटा दिया गया है, लेकिन मुझे यकीन नहीं है कि यह एक पूर्ण नियम है या नहीं।

---

मैं बस की खोज की है जब मैं अपनी फ़ाइल मान्य कि एसवीजी में शीर्षक-विशेषता अनुमति नहीं है जहां मैं इसे उपयोग कर रहा है, लेकिन यह सबसे ब्राउज़रों के साथ काम करता है। मानक के अनुसार आपको शीर्षक-तत्व का उपयोग करना चाहिए, लेकिन ऐसा लगता है कि यह किसी भी ब्राउज़र के साथ काम नहीं करता है। इसके अलावा, मानक के अनुसार, मैं एक शैली-तत्व को शीर्षक-विशेषता दे सकता हूं, लेकिन ऐसा लगता है कि यह किसी भी ब्राउज़र के साथ काम नहीं कर रहा है और इसके लिए मुझे केवल 180 की बजाय 180 स्टाइल-तत्वों का उपयोग करने की आवश्यकता होगी (कोड है एक स्क्रिप्ट द्वारा उत्पन्न, इसलिए मेरे लिए उन्हें बनाने में कोई समस्या नहीं है, यह सिर्फ इतना है कि यह कोड को समझने के लिए बहुत बड़ा और कठिन बना देगा)।

---

मैंने जो सवाल उठाए हैं, वे अब तक के "उत्तर" प्राप्त नहीं हुए हैं, और यहां तक ​​कि दूरस्थ रूप से उपयोगी भी नहीं हैं।

I परवाह नहीं है कि छवि इंकस्केप में संपादन योग्य है या नहीं। इंकस्केप बिटमैप छवियों को बनाने के लिए एक अच्छा टूल है (भले ही आपको बाद में बेहतर संपीड़न प्राप्त करने के लिए उन्हें किसी अन्य प्रोग्राम के माध्यम से चलाने के लिए)। इंकस्केप एसवीजी फाइलें बनाने में बेकार है (या किसी भी वेक्टर आधारित छवि फ़ाइलों को दर्शकों के लिए लक्षित, वेक्टर आधारित छवि फाइलें इंकस्केप बनाता है केवल इंकस्केप के साथ वास्तव में उपयोगी है), इंकस्केप वास्तव में, वास्तव में, वास्तव में खराब उपकरण है जो एसवीजी बनाने के लिए चुनने के लिए है एक अंत उत्पाद के रूप में इरादा छवियों; इसके लिए सोदीपोडी एक अच्छा उपकरण था, लेकिन इनक्सकेप सोदीपोडी नहीं है, केवल सोदीपोडी पर आधारित है (दुर्भाग्यवश, सोदीपोडी का पुराना सी-संस्करण आधुनिक कंप्यूटर सिस्टम पर अच्छा नहीं चलता है और सी ++ संस्करण कभी खत्म नहीं हुआ था)। मैं अपनी छवि को टेक्स्ट एडिटर के साथ संपादित करना आसान बनाना चाहता हूं, ताकि कोई विकिपीडिया इंक्सस्केप का उपयोग करने के लिए लुभाने और फ़ाइल को अनजान बनाने के लिए प्रेरित न हो (और प्रक्रिया में आकार को थोड़ा कम से कम 2 एमबी से 60 एमबी तक बढ़ाएं, यदि आप इसे "मानक" एसवीजी छवि (जो हमेशा मानक शिकायत फ़ाइल नहीं देते हैं) के रूप में इनक्सकेप में सहेजते हैं, तो इनस्कैप्स का स्वयं का एसवीजी-आधारित फ़ाइल प्रारूप भी बड़ी फाइलें बनाता है)।

मुझे नहीं लगता कि विकिपीडिया एसवीजी-छवियों के भीतर जावास्क्रिप्ट को अनुमति देता है, इसलिए जावास्क्रिप्ट से बाहर है।

मुझे पहले से ही पता है कि कैसे जावास्क्रिप्ट के साथ टूलटिप्स और एसवीजी में उन्हें बनाने के लिए दो अलग-अलग तरीकों को बनाना है (लेकिन एसवीजी में एम्बेडेड सीएसएस में नहीं)।कारण, मूल प्रश्न में पहले से उल्लिखित एक के अलावा, कि मैं टूलटिप्स के लिए एसवीजी कोड का उपयोग नहीं करना चाहता हूं कि कोई भी वेब ब्राउज़र मानक का समर्थन नहीं करता है, लेकिन एसवीजी-दर्शक करते हैं (लेकिन गैर-मानक नहीं टूलटिप्स जो ब्राउज़रों के साथ काम करते हैं), इसलिए कोई भी व्यक्ति जो फ़ाइल में एक टूलटिप में मैन्युअल रूप से सुधार करेगा (टेक्स्ट एडिटर के साथ), पाठ को दो अलग-अलग स्थानों में बदलना होगा, संभवत: समय के साथ, परिणामस्वरूप विभिन्न टूलटिप्स विभिन्न ब्राउज़रों/दर्शकों में।

Answer 1

जहाँ तक मैं आपको बता सकता हूं कि आप नहीं कर सकते हैं। एसवीजी तत्व अजीब व्यवहार करता प्रतीत होता है।

मैंने सोचा था कि आप इस का उपयोग कर CSS3 के समान ही संकल्पना लागू हो सकते हैं:

<style type="text/css"> 
acronym{ 
    position:relative 
} 
acronym:after { 
    content:attr(title); 
    position:absolute; 
    position:absolute; 
    left:100%; 
    margin-left:-10px; 
    top:-0.5em; 
    z-index:2; 
    padding:0.25em; 
    width:200px; 
    background-color:#f1f1f1; 
    text-align:center; 
    display:none; 
} 
acronym:hover:after{ 
    display:block; 
} 
</style> 

<acronym title="Keep It Simple Stupid"><a href="/">KISS</a></acronym> 

लेकिन :after चयनकर्ता एसवीजी तत्व पर काम करने के

मुझे लगता है कि आपका सर्वश्रेष्ठ दांव एक jQuery है प्रतीत नहीं होता स्क्रिप्ट जो $(document).ready() पर चलता है और आपके लिए भारी भारोत्तोलन करता है।

Answer 2

मैं अक्सर एसवीजी तत्वों पर (अमान्य) शीर्षक = "" विशेषता का उपयोग करने का सहारा लेता हूं क्योंकि यह बहुत आसान है और अधिकांश ब्राउज़रों में काम करता है। मैं समझता हूं कि आपकी आवश्यकता यह है कि यह मानक अनुरूप है और लोग ग्राफिक को इंकस्केप में पारदर्शी रूप से संपादित कर सकते हैं और टूलटिप्स को तोड़ने के बिना - इसके लिए आपको कुछ जावास्क्रिप्ट का उपयोग करना होगा। यहां एक त्वरित उदाहरण है, मुझे आशा है कि आपको सहायक मिलेगा, यह माउसओवर ईवेंट को प्रत्येक < शीर्षक > तत्व के तत्काल माता-पिता से जोड़ देगा और कर्सर के बगल में प्रदर्शित टूलटिप में टेक्स्ट सामग्री लोड करेगा। यह इंकस्केप संगतता को बनाए रखने और टूलटिप टेक्स्ट सेट करने के लिए इंकस्केप के "ऑब्जेक्ट प्रॉपर्टीज" संवाद बॉक्स का उपयोग करने की क्षमता को बनाए रखते हुए।

को देखते हुए निम्न उदाहरण एसवीजी:

<style> 
g#toolTip { 
visibility: hidden; 
} 
    g#toolTip rect { 
    fill: #FFCC00; 
    } 
    g#toolTip text { 
    font-size: 16px; 
    } 
</style> 

तब जे एस के छिड़काव सम्मिलित करें:

<g id="toolTip" transform="translate(0,0)"> 
    <rect width="150" height="25" /> 
    <text x="5" y="18"> </text> 
</g> 

यह कुछ स्टाइल दें:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <title>Main Title</title> 
    <g id="group1"> 
    <title>Title One</title> 
    <circle cx="120" cy="60" r="40" fill="#993333" /> 
    </g> 
    <g id="group2"> 
    <title>Title Two</title> 
    <circle cx="60" cy="60" r="40" fill="#339933" /> 
    <g id="group3"> 
     <circle cx="180" cy="60" r="40" fill="#333399" /> 
     <title>Title Three</title> 
    </g> 
    </g> 
</svg> 

पहले एक डमी टूलटिप तत्व जोड़:

<script> 
    <![CDATA[ 
    var toolTip = document.getElementById('toolTip'); 
    var titles = document.getElementsByTagName('title'); 
    for (var i = 0; i < titles.length; i++) { 
    titles.item(i).parentNode.addEventListener('mouseover', function(e) { 
     showTip(this,xy(e)); 
    }, true); 
    titles.item(i).parentNode.addEventListener('mouseout', function() { 
     hideTip(); 
    }, true); 
    } 
    function showTip(element,pos) { 
    var text = element.getElementsByTagName('title')[0].childNodes[0].nodeValue; 
    toolTip.getElementsByTagName('text')[0].childNodes[0].nodeValue = text; 
    toolTip.setAttribute('transform', 'translate(' + pos + ')'); 
    toolTip.style.visibility = 'visible'; 
    } 
    function hideTip() { 
    toolTip.style.visibility = 'hidden'; 
    } 
    function xy(e) { 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
     return [e.pageX,e.pageY] 
    } else if (e.clientX || e.clientY) { 
     return [e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,e.clientY + document.body.scrollTop + document.documentElement.scrollTop]; 
    } 
    return [0,0] 
    } 
    ]]> 
</script> 

चेतावनी: जेएस ब्लॉक को एसवीजी फ़ाइल के नीचे जाना होगा - और यदि आप इंकस्केप (दुर्लभ) में एक्सएमएल संपादक का उपयोग करते हैं तो यह स्क्रिप्ट को गड़बड़ कर देगा (इसे बाहरी जेएस फ़ाइल में ले जाकर हल किया जा सकता है और कुछ डोम तैयार पहचान जोड़ना)।

दृष्टिकोण भी उम्मीद है कि एक) सभी < शीर्षक > तत्वों टूलटिप्स के रूप में प्रदान किया जाना चाहिए और ब) इस बात माता-पिता (प्रति ही कभी एक < शीर्षक > तत्व है कि अजीब तरह से, एसवीजी कल्पना की अनुमति देता है कई) - यहां मैंने इसे पहले < शीर्षक > बच्चे तत्व का सामना करने के लिए मुश्किल से कोड किया है, किसी भी बाद के किसी को अनदेखा कर रहा है।

नोट: कर्सर स्थिति की रिपोर्ट करने की बात आने पर xy (e) फ़ंक्शन केवल ब्राउज़र ब्राउज़र असंगतता प्राप्त करने के लिए आवश्यक है - आपको इसकी आवश्यकता नहीं हो सकती है, या आप अपना खुद का रोल करना पसंद कर सकते हैं।

बोनस: इसे आसानी से <desc> तत्व का उपयोग करने के लिए बढ़ाया जा सकता है, क्या आपको पाठ के लंबे बिट्स के साथ अधिक विस्तृत टूलटिप्स की आवश्यकता होनी चाहिए।