我可以制作一个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的额外积分.

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">,但这是完全不同的目的(跟踪点击位置的坐标).

Answer 2

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

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

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