كيفية إنشاء مربع يشبه "تلميح الأدوات" SVG؟

Question

بالنظر إلى مستند SVG صالح موجود، ما هي أفضل طريقة لإنشاء "نوافذ منبثقة إعلامية"، بحيث عندما تقوم بالتمرير أو النقر فوق عناصر معينة (على سبيل المثال) فإنك تظهر مربعًا منبثقًا بكمية عشوائية (على سبيل المثال:ليس مجرد تلميح أداة من سطر واحد) للحصول على معلومات إضافية؟

يجب أن يتم عرض هذا بشكل صحيح على الأقل في Firefox ويكون غير مرئي إذا تم تحويل الصورة إلى تنسيق نقطي.

Answer 1

<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>

يمكن العثور على مزيد من التوضيح هنا.

Answer 2

تم طرح هذا السؤال في عام 2008.لقد تحسنت SVG بسرعة في السنوات الأربع الفاصلة.الآن يتم دعم تلميحات الأدوات بشكل كامل في جميع الأنظمة الأساسية التي أعرفها.إستخدم <title> علامة (ليست سمة) وستحصل على تلميح أداة أصلي.

وهنا المستندات:https://developer.mozilla.org/en-US/docs/SVG/Element/title

Answer 3

منذ <set> العنصر لا يعمل مع Firefox 3، أعتقد أنه يتعين عليك استخدام ECMAScript.

إذا قمت بإضافة عنصر البرنامج النصي التالي إلى SVG الخاص بك:

  <script type="text/ecmascript"> <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }

    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }

    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

تحتاج إلى إضافة onload="init(evt)" في عنصر SVG لاستدعاء الدالة init().

ثم، إلى نهاية SVG، أضف نص تلميح الأداة:

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

أخيرًا، أضف إلى كل عنصر تريد إضافة وظيفة تمرير الماوس إليه:

onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

لقد كتبت شرحًا أكثر تفصيلاً مع تحسين الوظائف في http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

لم أقم بعد بتضمين تلميحات أدوات متعددة الأسطر، الأمر الذي قد يتطلب عدة تلميحات <tspan> العناصر وتغليف الكلمات يدويًا.

Answer 4

يجب أن يعمل هذا:

nodeEnter.append("svg:element")
   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
   .append("svg:title")
   .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly