Bir SVG yol öğesini bir tıklama komutunda başka bir şekle dönüştürme nasıl yapılır?

Question

Bir oynatma ve durdurma düğmesi yapmaya çalışıyorum. Tıklandığında, üçgen şeklin (bir yol) kare şekle (yol) dönüştüğünü bilmiyorum. Her seferinde sadece bir şekil gösteriliyor. Biri yardım edebilir mi?

<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

I .. bir şekilde desteklenen eğer nitelik veya karşılık gelen DOM özelliği, değiştirdiği bir onclick taşıyıcısının bir use xlink:href="#shapeName" daha sonra kullanmak defs da iki yol tanımlamak ve bir

bir use elemanı nesnesi düşünmek Tamamen uygulanmış SVG DOM ile baseVal özelliği ve baseVal özelliği ile https://jsfiddle.net/4x0gnkob/ çevrimiçi bir örnek için.

.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>

alternatif DOM niteliğini değiştirmek için ise

, bazı testler sonrasında, ben bir çizgide setAttributeNS ve getAttributeNS ile çözebilir düşündüm bir HTML5 ortamında karmaşık biraz görünüyor o HTML5 getAttribute('xlink:href') içinde daha iyi çalışır gibi görünüyor, bu nedenle tam kod, hangi işlevin bir değer döndürdüğünü test etmeye çalışır. https://jsfiddle.net/w36k21uz/1/ de

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>

Çevrimiçi.

Answer 2

Bunun gibi her şeyi yapamazsınız, ya kullanımdan kaldırılacak olan SMIL'u kullanabilir ya da özel bir animasyon motoru kullanabilirsiniz. SVG için ihtiyaç duyacağınız şeylerin çoğunu yapan bir SVG Plugin ile KUTE.js'yi geliştirdim.

hızlı bir demo (yalnızca nedeniyle bazı Stackoverflow XSS konuya Firefox'ta çalışması gerekir):

<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>