SVG 按钮切换

Question

我正在尝试将 SVG 按钮从一种状态切换到另一种状态。它们是两个独立的 SVG，包含在一个更大的 SVG 中。

为了参考，我在此处附上了这些图片：

到目前为止，我已经想到了这个，我在 onclick 中将 ID 值从显示更改为打开或关闭，如下所示。我确定使用 jQuery?

有更简洁的方法

HTML SVG 代码太长所以我添加到 pastebin

JS代码

$( "#off-btn-nav-01-category" ).on( "click", function() {
  $("#off-btn-nav-01-category").css("display", "none");
  $("#on-btn-nav-01-category").css("display", "block");
});

$( "#on-btn-nav-01-category" ).on( "click", function() {
  $("#on-btn-nav-01-category").css("display", "none");
  $("#off-btn-nav-01-category").css("display", "block");
});

Answer 1

如果您像您所说的那样使用内联 svg，那么您只需切换 svg 中引用的 id。

$(".Icon use").on("click", function() {
  if ($(this).attr("href") === "#Icon-On") {
    $(this).attr("href", "#Icon-Off");
  } else {
    $(this).attr("href", "#Icon-On");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="Icon-On" viewBox="0 0 1024 1024">
<path class="Path1" d="M512 32l-480 480h288v512h384v-512h288z" />
</symbol>
<symbol id="Icon-Off" viewBox="0 0 1024 1024">
<path class="Path1" d="M864 128l-480 480-224-224-160 160 384 384 640-640z" />
</symbol>
</svg>
</div>

<svg class="Icon"><use href="#Icon-Off" /></svg>
<svg class="Icon"><use href="#Icon-Off" /></svg>

Answer 2

您可以对 jQuery 选择器使用 startswith 运算符，从 id 中提取数字和类型并将其应用于您的其他选择器：

$('[id^="off-btn-nav"], [id^="on-btn-nav"]').click(function() {
    let idParts = this.id.split("-");
    let number = idParts[idParts.length - 2];
    if (idParts[0] === "on") {
        $(`#on-btn-nav-${number}-${idParts[idParts.length - 1]}`).hide();
        $(`#off-btn-nav-${number}-${idParts[idParts.length - 1]}`).show();
    } else {
        $(`#on-btn-nav-${number}-${idParts[idParts.length - 1]}`).show();
        $(`#off-btn-nav-${number}-${idParts[idParts.length - 1]}`).hide();
    }
});

请原谅我没有创建一个片段，whosebug.com说它太长了。

JSFiddle：https://jsfiddle.net/tygkjLvf/

SVG 按钮切换

SVG Button Toggle

javascript

html

jquery

css

svg