如何在单击命令上将一个SVG路径元素变形为另一个？ [英] How to morph one SVG path element into another on a click command?

问题描述

我正在尝试制作播放和停止按钮。我不知道如何在点击时将三角形形状（它是一条路径）变形为方形（它是一条路径）。仅一次显示一个形状。任何人都可以帮忙吗？

I am trying to make a play and stop button. I don't know how to morph the triangle shape (it is a path) into the square shape (it is a path) when it has been clicked. Only showing one shape at a time. Can anyone help?

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

推荐答案

我认为一种方法是定义你的两条路径 defs 然后使用使用xlink：href =＃shapeName，使用onclick处理程序切换该属性或相应的DOM属性，如果支持..

I think one way is to define your two paths in defs and then use a use xlink:href="#shapeName" with an onclick handler that toggles that attribute or the corresponding DOM property, if supported..

一个使用元素对象，完全实现的SVG DOM具有 href 属性，可以读取和设置 baseVal 属性，所以在我测试的内部浏览器中（使用Firefox，Chrome ，IE和Edge on Window）我们可以简单地切换该属性，参见 https://jsfiddle.net/4x0gnkob/对于在线样本。

A use element object with fully implemented SVG DOM has a href property with a baseVal property that can be read and set, so inside browsers as far as I have tested (with Firefox, Chrome, IE and Edge on Window) we can simply toggle that property, see https://jsfiddle.net/4x0gnkob/ for an online sample.

  .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'）中工作得更好，因此完整代码会尝试测试哪个函数返回一个值。

An alternative is to toggle the DOM attribute, it seems a bit complicated in an HTML5 environment as I thought I could solve it with setAttributeNS and getAttributeNS in one line, after some testing it seems that within HTML5 getAttribute('xlink:href') works better, so the full code tries to test which function returns a value.

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

这篇关于如何在单击命令上将一个SVG路径元素变形为另一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！