एक क्लिक कमांड पर एक एसवीजी पथ तत्व को दूसरे में कैसे मोर्फ़ करें?

Question

मैं एक नाटक और स्टॉप बटन बनाने की कोशिश कर रहा हूं। मुझे नहीं पता कि त्रिकोण आकार (यह एक पथ है) को आकार के आकार में कैसे बदलना है (यह एक पथ है) जब इसे क्लिक किया गया है। केवल एक समय में एक आकार दिखा रहा है। क्या कोई मदद कर सकता है?

<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve"> 
<style type="text/css"> 

    .st0{fill:none; 
    stroke:#000000; 
    stroke-width:4; 
    stroke-miterlimit:10;} 
</style> 

<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/> 

<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/> 

</svg> 

Answer 1

मुझे लगता है कि एक ही रास्ता defs में अपने दो पथ को परिभाषित और फिर एक onclick हैंडलर कि उस विशेषता या इसी डोम संपत्ति, अगर समर्थित टॉगल के साथ एक use xlink:href="#shapeName" उपयोग करने के लिए है ..

एक use तत्व वस्तु पूरी तरह से कार्यान्वित एसवीजी डोम के साथ href संपत्ति baseVal संपत्ति है जिसे पढ़ और सेट किया जा सकता है, इसलिए जहां तक ​​मैंने परीक्षण किया है (ब्राउज़र में फ़ायरफ़ॉक्स, क्रोम, आईई और एज के साथ) ब्राउज़र के अंदर हम बस उस संपत्ति को टॉगल कर सकते हैं, https://jsfiddle.net/4x0gnkob/ देखें एक ऑनलाइन नमूना के लिए।

.st0{fill:none; 
 
    stroke:#000000; 
 
    stroke-width:4; 
 
    stroke-miterlimit:10;}

<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve"> 
 

 
    <defs> 
 
    <path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/> 
 

 
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/> 
 

 

 
    </defs> 
 
    <use xlink:href="#playTriangle" pointer-events="all" onclick="this.href.baseVal = this.href.baseVal == '#playTriangle' ? '#stopSquare' : '#playTriangle';"></use> 
 
    </svg>

एक वैकल्पिक DOM विशेषता चालू करने के लिए है, यह थोड़ा एक HTML5 वातावरण में जटिल रूप में मैंने सोचा कि मैं एक पंक्ति में setAttributeNS और getAttributeNS साथ इसे हल कर सकता है लगता है, कुछ परीक्षण के बाद यह ऐसा लगता है कि एचटीएमएल 5 getAttribute('xlink:href') के भीतर बेहतर काम करता है, इसलिए पूरा कोड परीक्षण करने का प्रयास करता है कि कौन सा फ़ंक्शन एक मान देता है।

function toggleLink(element, value1, value2) { 
 
    var xlinkNS = 'http://www.w3.org/1999/xlink'; 
 
    var linkName = 'xlink:href'; 
 
    var oldValue = element.getAttributeNS(xlinkNS, linkName) || element.getAttribute(linkName); 
 
    if (element.hasAttributeNS(xlinkNS, 'href')) { 
 
    element.setAttributeNS(xlinkNS, linkName, oldValue == value1 ? value2 : value1) 
 
    } 
 
    else { 
 
    element.setAttribute(linkName, oldValue == value1 ? value2 : value1); 
 
    } 
 
}

.st0{fill:none; 
 
    stroke:#000000; 
 
    stroke-width:4; 
 
    stroke-miterlimit:10;}

<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve"> 
 

 
    <defs> 
 
    <path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/> 
 

 
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/> 
 

 

 
    </defs> 
 
    <use xlink:href="#playTriangle" pointer-events="all" onclick="toggleLink(this, '#stopSquare', '#playTriangle')"></use> 
 
    </svg>

ऑनलाइन https://jsfiddle.net/w36k21uz/1/ पर।

Answer 2

आप इस तरह की सभी चीजें नहीं कर सकते हैं, आप या तो SMIL का उपयोग कर सकते हैं, जिसे हटाया जाना है, या एक समर्पित एनीमेशन इंजन का उपयोग करना है। मैंने SVG Plugin के साथ KUTE.js विकसित किया है जो आपको संभवतः एसवीजी के लिए आवश्यक चीजों में से अधिकांश करता है।

एक त्वरित डेमो (केवल कुछ Stackoverflow XSS के मुद्दे के कारण फ़ायरफ़ॉक्स में काम करना चाहिए):

<div style="width: 220px"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"> 
 
    <path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 
 
         c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path> 
 
    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 
 
         l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path> 
 

 
    </svg> 
 
</div> 
 

 
<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script> 
 
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script> 
 

 
<script> 
 
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1}).start(); 
 

 
document.addEventListener('click', function(){ 
 
    !tween.playing && tween.start(); 
 
}, false); 
 
</script>