如何在单击命令中将一个SVG路径元素变形为另一个SVG路径元素？

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定义你的两条路径，然后使用use xlink:href="#shapeName"与切换如果支持该属性或相应的DOM属性，一个onclick处理..

一个use元素对象完全实现的SVG DOM有href属性，可以读取和设置属性baseVal，所以在我测试的内部浏览器中（使用Firefox，Chrome，IE和Window on Window），我们可以简单地切换该属性，请参阅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解决这个问题，一些测试后，似乎在HTML5 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，它可以完成SVG可能需要的大部分功能。

快速演示（应适用于Firefox，只是由于一些XSS＃1号）：

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