javascript - 动画 Svg 路径 D 坐标

Question

<分区>

Answer 1

使用 SVG 动画的解决方案:

为此，我们需要在两个动画中创建一个具有正确坐标的路径，当您按下按钮时，脚本将运行其中一个动画

在线示例:

$(function() {
  $('#button').click(function() {
    if ($('#button.-pause').length == 1 && $('#button.-play').length == 0) {
      $('#button svg path .button-play')[0].beginElement();
      $('#button').removeClass('-pause');
      $('#button').addClass('-play');
    } else {
      $('#button svg path  .button-pause')[0].beginElement();
      $('#button').removeClass('-play');
      $('#button').addClass('-pause');
    };
    return false;
  });
});

@import url('data:text/css;charset=UTF-8,body { font-family: Tahoma, sans-serif; font-size: 0.8rem; } a {display: inline-block;color: #427fed;cursor: pointer;text-decoration: none;margin-right:5px;} a:hover {text-decoration: underline;} button { -webkit-padding-end: 10px; -webkit-padding-start: 10px; min-height: 2em; min-width: 4em; padding-bottom: 1px; -webkit-appearance: none; -webkit-user-select: none; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); color: #444; font: inherit; margin: 0 1px 0 0; outline: none; text-shadow: 0 1px 0 rgb(240, 240, 240); } button:hover { background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); color: black; } button:active { background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); box-shadow: none; text-shadow: none; } button:focus { -webkit-transition: border-color 200ms; border-color: rgb(77, 144, 254); outline: none; } select { -webkit-padding-end: 20px; -webkit-padding-start: 6px; background-position: right center; background-repeat: no-repeat; min-height: 2em; min-width: 4em; padding-bottom: 0; -webkit-user-select: none; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); color: #444; font: inherit; margin: 0 1px 0 0; outline: none; text-shadow: 0 1px 0 rgb(240, 240, 240); } select:hover { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQ%E2%80%A6BbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); color: black; } select:active { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQ%E2%80%A6BbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); box-shadow: none; text-shadow: none; } select:focus { -webkit-transition: border-color 200ms; border-color: rgb(77, 144, 254); outline: none; }');

#button {
  min-width: auto;
  padding: 3px 3px 0 1px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<button id="button" class="-pause">
  <svg width="36" height="36" viewBox="0 0 36 36">
    <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z">
      <animate class="button-pause" attributeName="d" attributeType="XML" dur="0.15s" begin="none" fill="freeze" from="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" to="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" />
      <animate class="button-play" attributeName="d" attributeType="XML" dur="0.15s" begin="none" fill="freeze" from="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" to="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" />
    </path>
  </svg>
</button>