时间戳

首页 > 解决方案 > 单击时 SVG 切换颜色并在单击其他 svg 时返回原始颜色

svg - 单击时 SVG 切换颜色并在单击其他 svg 时返回原始颜色

问题描述

我想在点击时切换 svg 导航板的颜色，但只有翻转有效。我不熟悉 js（我昨天写了我的第一个 jQuery 声明）。仅使用 html 可以吗？我已经阅读了所有相关的帖子，但没有人给我答案。当一个箭头被点击时，它变成红色，而当另一个箭头被点击时，它必须恢复到原来的颜色。Node.js 脚本工作正常（感谢 RAdesign），但颜色会在一个元素上切换。如果我将它扩展到其他元素，它不会像导航板那样在其他元素之间切换。谢谢，菲利普。

    <svg xmlns="http://www.w3.org/2000/svg">
      <svg>
        <g transform="translate(210,105)">
            <polygon id="right" fill="#50C2BA" x="200" y="100" points="50,0 100,50 50,100 0,100 0,0"/></g>
          <g transform="translate(0,105)">
              <polygon id="left" fill="#50C2BA" x="0" y="100" points="0,50 50,0 100,0 100,100 50,100"/></g>
          <rect id="center" fill="#50C2BA" x="105" y="105" width="100" height="100" /> 
        </g>
      </svg>
    </svg>      

$('#right').on("click", function() {
    $(this).css({ fill: "red" });
});

标签： svgcolorspathpositiontoggle

解决方案

这是一个单击路径填充颜色的示例：

$(".colorize").on("click", function() {
  $(".colorize").removeClass("red");
  $(this).toggleClass("red");
});
.red {
  fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg">
      <svg>
        <g transform="translate(210,105)">
            <polygon class="colorize" id="right" fill="#50C2BA" x="200" y="100" points="50,0 100,50 50,100 0,100 0,0"/></g>
          <g transform="translate(0,105)">
              <polygon class="colorize" id="left" fill="#50C2BA" x="0" y="100" points="0,50 50,0 100,0 100,100 50,100"/>             </g>
          <rect class="colorize" id="center" fill="#50C2BA" x="105" y="105" width="100" height="100" /> 
        </g>
      </svg>
</svg>

推荐阅读