एसवीजी defs अलग-अलग आंकड़े के बीच संबंध फ़ायरफ़ॉक्स

का उपयोग हम एक बस कोड है, जो क्रॉस-ब्राउज़र काम करता है:एसवीजी defs अलग-अलग आंकड़े के बीच संबंध फ़ायरफ़ॉक्स

<html> 
<?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" 
width="200" height="100"> 

    <circle id="circ" cx="120" cy="40" 
    r="30" fill="green"/> 

    <rect id="rect" x="10" y="10" 
    width="60" height="60" fill="blue"> 
     <set attributeName="fill-opacity" to="0.5" 
     begin="circ.mouseover" end="circ.mouseout"/> 
    </rect> 
</svg>

जब मैं defs में तत्वों का उपयोग करने की कोशिश ब्लॉक मैं खो रहा हूँ फ़ायरफ़ॉक्स ब्राउज़र में दो आयताकारों के बीच संबंध।

<html> 
<?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" 
width="200" height="100"> 
    <defs> 
     <circle id="circ" cx="120" cy="40" 
     r="30" fill="green"/> 

     <rect id="rect" x="10" y="10" 
     width="60" height="60" fill="blue"> 
      <set attributeName="fill-opacity" to="0.5" 
      begin="circ.mouseover" end="circ.mouseout"/> 
     </rect> 
    </defs> 

    <use id="use_circ.rectangles" xlink:href="#circ" /> 
    <use id="use_rect.rectangles" xlink:href="#rect" /> 
</svg>

मैं यहाँ http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs संबंध के बारे में कुछ पढ़ा है? - वास्तव में इस शब्द

"ध्यान दें कि यह प्रभाव फ़ायरफ़ॉक्स फ़ायरफ़ॉक्स 6 में काम नहीं करता है और पहले (मुझे लगता है कि) है, जो शायद इस पद्धति की सबसे बड़ी खामी है।"

मैं दबाने की जरूरत एक और तत्व को स्थानांतरित करने के लिए बटन (बदलें)। मैं भी कुछ इस तरह बनाने के लिए, संबंध प्रभाव स्थापित करने के लिए करने की कोशिश की:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Button</title> 

    <script type="text/javascript" language="javascript"> 
     function turn_right(button, miliSec) 
     { 
      document.getElementById("circ_left_position").setAttribute('visibility','hidden'); 

      setTimeout(function() { 
       button.parentNode.setAttribute('xlink:href','#rect.right_position'); 
      }, miliSec); 

      document.getElementById("circ_right_position").setAttribute('visibility','visible '); 
     } 
     function turn_left(button, miliSec) 
     { 
      document.getElementById("circ_right_position").setAttribute('visibility','hidden '); 

      setTimeout(function() { 
       button.parentNode.setAttribute('xlink:href','#rect.left_position'); 
      }, miliSec); 

      document.getElementById("circ_left_position").setAttribute('visibility','visible '); 
     } 
    </script> 
</head> 

<body style="margin:0; border:0"> 
    <?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" 
    width="200" height="100"> 

     <defs> 
      <g id="rect.left_position" onclick="turn_right(this,500)"> 
       <rect x="10" y="10" width="60" height="60" fill="blue"/> 

       <circle id="circ_left_position" cx="120" cy="40" r="30" fill="green"/> 

       <animateTransform id="trigger1" begin="click" 
       attributeName="transform" type="rotate" additive="replace" 
       from="0 70 70" to="10 70 70" dur="0.5s" fill="freeze" /> 
      </g> 

      <g id="rect.right_position" onclick="turn_left(this,500)"> 
       <rect x="10" y="10" width="60" height="60" fill="blue" transform="rotate(10 70 70)"/> 
       <circle id="circ_right_position" cx="120" cy="40" r="30" fill="green"/> 

       <animateTransform id="trigger1" begin="click" 
       attributeName="transform" type="rotate" additive="replace" 
       from="0 70 70" to="-10 70 70" dur="0.5s" fill="freeze" /> 
      </g> 
     </defs> 

     <use id="positions.rectangles" xlink:href="#rect.left_position" /> 

    </svg> 
</body>

क्रोम में और एफएफ हम अलग परिणाम मिलता है। आगे, मैं ब्राउज़र में अंतर नहीं समझता। मुझे यकीन है, एक सरल समाधान मौजूद है।

स्रोत

2014-07-23 Artem.Borysov

एसएमआईएल फ़ायरफ़ॉक्स में '' तत्वों के साथ बहुत अच्छी तरह से काम नहीं करता है मुझे डर है। –

क्या आपने SMIL एनिमेशन के बजाय इसे एनिमेट करने के लिए Snap.svg जैसी लाइब्रेरी का उपयोग करने का प्रयास किया है? एसएमआईएल एनिमेशन के लिए समर्थन उतना अच्छा नहीं है जितना अभी होना चाहिए। – arrow

एक उपयोग एनीमेशन इस उम्मीद एसवीजी 1.1 में व्यवहार नहीं कर रहा है नकल नहीं करता है (यह एक फ़ायरफ़ॉक्स मुद्दा नहीं है)

स्मिल एसवीजी 2 में इस संबोधित करेंगे।

आप क्या कर सकते हैं स्क्रिप्टिंग का उपयोग प्रत्येक एनीमेशन को क्लोन करने और उन्हें उपयोग टैग में जोड़ने के लिए करना है। शायद एक अधिभार घटना पर। हालांकि मुझे विश्वास है कि यह आपके विशिष्ट कोड सेट के लिए काम नहीं करेगा क्योंकि एक आईडी निर्दिष्ट करें।

स्रोत

2014-11-12 16:36:58

एसवीजी defs अलग-अलग आंकड़े के बीच संबंध फ़ायरफ़ॉक्स

उत्तर

संबंधित मुद्दे