Làm thế nào để biến đổi một phần tử đường dẫn SVG thành một phần tử khác trên một lệnh bấm?

Question

Tôi đang cố gắng thực hiện nút phát và dừng. Tôi không biết làm thế nào để morph hình tam giác (nó là một con đường) vào hình vuông (nó là một con đường) khi nó đã được nhấp. Chỉ hiển thị một hình dạng tại một thời điểm. Có ai giúp được không?

<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

Tôi nghĩ một cách là để xác định hai con đường của bạn trong defs và sau đó sử dụng một use xlink:href="#shapeName" với một handler onclick rằng Toggles rằng thuộc tính hoặc thuộc tính DOM tương ứng, nếu được hỗ trợ ..

Một đối tượng use yếu tố với SVG DOM được triển khai đầy đủ có thuộc tính href với thuộc tính baseVal có thể đọc và đặt, vì vậy trong các trình duyệt như tôi đã thử (với Firefox, Chrome, IE và Edge trên Window), chúng ta chỉ cần chuyển đổi thuộc tính đó, xem https://jsfiddle.net/4x0gnkob/ cho một mẫu trực tuyến.

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

Một cách khác là để chuyển đổi các thuộc tính DOM, nó có vẻ hơi phức tạp trong một môi trường HTML5 như tôi nghĩ tôi có thể giải quyết nó với setAttributeNS và getAttributeNS trong một dòng, sau khi một số thử nghiệm nó có vẻ như trong HTML5 getAttribute('xlink:href') hoạt động tốt hơn, do đó, mã đầy đủ sẽ cố gắng kiểm tra hàm nào trả về một giá trị.

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>

trực tuyến tại https://jsfiddle.net/w36k21uz/1/.

Answer 2

Bạn không thể làm tất cả những việc như thế, bạn có thể sử dụng SMIL, điều này sẽ không được chấp nhận hoặc sử dụng công cụ hoạt hình chuyên dụng. Tôi đã phát triển KUTE.js với một số SVG Plugin thực hiện hầu hết những thứ bạn có thể cần cho SVG.

Một bản demo nhanh (nên làm việc trong Firefox chỉ do một số vấn đề 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>