SVG Interactivity

<style>
  #toggleRect{cursor:pointer;transition:fill 160ms ease,transform 160ms ease}
  #toggleRect:hover{transform:translateY(-1px)}
  #toggleRect:focus-visible{outline:none}
  #toggleRect.is-focus{stroke:#0f172a;stroke-width:3}
</style>

<svg width="240" height="160" viewBox="0 0 240 160">
  <rect id="toggleRect" x="55" y="35" width="130" height="90" rx="16" fill="#2563eb"
        tabindex="0" role="button" aria-label="Toggle rectangle color" />
</svg>

<script>
  var rect = document.getElementById("toggleRect");
  function toggle() {
    var isBlue = rect.getAttribute("fill") === "#2563eb";
    rect.setAttribute("fill", isBlue ? "#ef4444" : "#2563eb");
  }
  rect.addEventListener("click", toggle);
  rect.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggle();
    }
  });
  rect.addEventListener("focus", function () { rect.classList.add("is-focus"); });
  rect.addEventListener("blur", function () { rect.classList.remove("is-focus"); });
</script>

<svg width="320" height="160" viewBox="0 0 320 160">
  <style>
    .chip{cursor:pointer;transition:transform 140ms ease,opacity 140ms ease}
    .chip:hover{transform:translateY(-2px);opacity:0.95}
    .chip.is-focus rect{stroke:#0f172a;stroke-width:3}
  </style>

  <g id="chipA" class="chip" tabindex="0" role="button" aria-label="Blue chip">
    <rect x="32" y="44" width="120" height="72" rx="18" fill="#3b82f6" />
    <text x="92" y="86" text-anchor="middle" font-size="14" fill="white"
          font-family="system-ui,Segoe UI,Arial" pointer-events="none">Blue</text>
  </g>

  <g id="chipB" class="chip" tabindex="0" role="button" aria-label="Green chip">
    <rect x="168" y="44" width="120" height="72" rx="18" fill="#10b981" />
    <text x="228" y="86" text-anchor="middle" font-size="14" fill="white"
          font-family="system-ui,Segoe UI,Arial" pointer-events="none">Green</text>
  </g>
</svg>

<div id="tip">Hover or focus a chip</div>

<script>
  var tip = document.getElementById("tip");
  function bindChip(id, msg) {
    var el = document.getElementById(id);
    function show() { if (tip) tip.textContent = msg; }
    el.addEventListener("mouseover", show);
    el.addEventListener("focus", function () { el.classList.add("is-focus"); show(); });
    el.addEventListener("blur", function () { el.classList.remove("is-focus"); });
  }
  bindChip("chipA", "Blue chip selected (demo)");
  bindChip("chipB", "Green chip selected (demo)");
</script>

<style>
  #pulseBtn { cursor: pointer; transition: fill 160ms ease, stroke-width 160ms ease; }
  #pulseBtn:focus-visible { stroke: #0f172a; stroke-width: 4; }
</style>

<svg width="200" height="160" viewBox="0 0 200 160">
  <circle id="pulseBtn" cx="100" cy="80" r="42" fill="#8b5cf6"
          tabindex="0" role="button" aria-pressed="false"
          aria-label="Pulse button" />
</svg>
<p id="status">Pressed: false</p>

<script>
  var btn = document.getElementById("pulseBtn");
  var status = document.getElementById("status");
  function activate() {
    var pressed = btn.getAttribute("aria-pressed") === "true";
    btn.setAttribute("aria-pressed", String(!pressed));
    btn.setAttribute("fill", pressed ? "#8b5cf6" : "#22c55e");
    status.textContent = "Pressed: " + (!pressed);
  }
  btn.addEventListener("click", activate);
  btn.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      activate();
    }
  });
</script>

<svg width="240" height="160" viewBox="0 0 240 160">
  <rect id="target" x="50" y="40" width="140" height="80" rx="12"
        fill="#2563eb" style="cursor:pointer" />
  <!-- Decorative overlay that should NOT steal clicks -->
  <rect x="50" y="40" width="140" height="80" rx="12"
        fill="white" fill-opacity="0.15" pointer-events="none" />
  <text x="120" y="88" text-anchor="middle" fill="white" font-size="14"
        font-family="system-ui,Segoe UI,Arial" pointer-events="none">Click me</text>
</svg>
<p id="hits">Clicks: 0</p>

<script>
  var n = 0;
  var target = document.getElementById("target");
  var hits = document.getElementById("hits");
  target.addEventListener("click", function () {
    n += 1;
    hits.textContent = "Clicks: " + n;
  });
</script>

<style>
  .card { cursor: pointer; transition: transform 140ms ease; }
  .card:hover { transform: translateY(-2px); }
  .card.is-on rect { fill: #f59e0b; }
</style>

<svg width="260" height="150" viewBox="0 0 260 150">
  <g id="card" class="card" tabindex="0" role="button" aria-pressed="false"
     aria-label="Select card">
    <rect x="40" y="30" width="180" height="90" rx="16" fill="#0ea5e9" />
    <text x="130" y="84" text-anchor="middle" fill="white" font-size="16"
          font-family="system-ui,Segoe UI,Arial" pointer-events="none">Select</text>
  </g>
</svg>

<script>
  var card = document.getElementById("card");
  function toggle() {
    var on = card.getAttribute("aria-pressed") === "true";
    card.setAttribute("aria-pressed", String(!on));
    card.classList.toggle("is-on", !on);
  }
  card.addEventListener("click", toggle);
  card.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggle();
    }
  });
</script>