我可以制作一个 svg 图像按钮吗？

Question

单击 svg 图像时有什么方法可以发出 POST 请求吗？

到目前为止我最好的尝试是这样的：

 <form action="/test-button" method="POST">
   <input name="Submit" type="submit" value="Submit" />
   <svg  >
     <rect width="100" height="100" >
   </svg>
</form>

这是一个黑色矩形，旁边有一个提交按钮。

我想让人们在几张图片之间进行选择，所以这可能是一个不错的解决方案，但是有没有什么方法可以制作一张图片，点击后会触发 POST？

不使用 javascript 的加分项。

原文由 John Lawrence Aspden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

警告：这有点 hacky，但据我所知它是 100% 合法的，并且不需要 javascript。

由于 label 元素也可以用来控制它的关联输入，你可以尝试这样的事情：

 <form action="/test-button" method="POST">
  <label>
   <input type="submit" name="image" value="one">
   <svg><rect width="100" height="100"></rect></svg>
  </label>
  <label>
   <input type="submit" name="image" value="two">
   <svg><rect width="100" height="100"></rect></svg>
  </label>
</form>
 ​

然后用 CSS 隐藏提交按钮。您可以将任何内容放入您想要的标签中。

当您单击标签中的任何内容时，它将触发其中的提交按钮并提交表单，按钮的 value 在 POST 数组中。

还有一个 <input type="image"> ，但这是完全不同的目的（跟踪点击位置的坐标）。

原文由 Wesley Murch 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这似乎是 <button> 元素的一个很好的用例。

 <form action="/test-button" method="POST">
   <button>
      <svg>
         <rect width="100" height="100" >
      </svg>
   </button>
</form>

单击按钮元素执行与 input[type="submit"] 完全相同的工作，因此您可以完全替换输入。如果你走这条路，你也可以考虑在按钮内放置一个文本标签和/或 title 在 svg 内放置一个用于可访问性目的。

原文由 Brad Marshall 发布，翻译遵循 CC BY-SA 3.0 许可协议