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

【问题标题】：SVG toggle color on click and returns at original color when other svg is clicked单击时 SVG 切换颜色并在单击其他 svg 时返回原始颜色
【发布时间】：2021-03-05 23:29:59
【问题描述】：

我想在点击时切换 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" });
});

【问题讨论】：

你能分享你的 SVG 代码吗？
好笑！我已经找到了问题的第一部分......所以我正在编辑标题以修改我的要求......并且帖子已经消失了！谢谢你这么快的回复。我只是添加了转换参数并且它起作用了。 "" ...但现在我正在与颜色切换作斗争:°)
如果您想获得永久效果，即停止悬停后保持相同颜色的东西，那么 javascript 是唯一的方法。

标签： svg colors path position toggle

【解决方案1】：

这是一个在点击时切换路径填充颜色的示例：

$(".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>

【讨论】：

谢谢。我将脚本放在之前，但它不起作用...（我在中添加了 js 声明）
将脚本放在 HTML 文档的末尾，它需要在渲染 SVG 后加载。否则选择器当然不会找到它。
谢谢。它现在有效......但仅限于它自己。我希望它在所有元素之间切换：当我点击一个绿色箭头时，它变成红色，如果我点击另一个，另一个变成红色，前一个检索它原来的绿色。
@3dOxyd 好吧，我会用一些示例代码来更新我的答案。