我可以SVG图像按钮？ [英] Can I make an svg image button?

问题描述

有没有做一个POST请求被点击SVG图像时的方法吗？

Is there any way of making a POST request when an svg image is clicked?

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

My best attempt so far looks like:

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

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

Which is a black rectangle with a submit button next to it.

我希望让人们多张图像之间进行选择，所以这可能是一个好的解决办法，但有使图像的任何方式，点击后，会触发掀起了POST？

I want to allow people to choose between several images, so this may be an ok solution, but is there any way of making an image which, when clicked, will fire off a POST?

不使用JavaScript的加分。

Extra points for not using javascript.

推荐答案

警告：这是一个小哈克，但据我所知，这是100％合法，并不需要JavaScript的

Warning: This is a little hacky, but as far as I know it's 100% legit, and doesn't need javascript.

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

Since the label element can also be used to control it's associated input, you could try something like this:

<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的提交按钮。你可以把任何东西你想要的标签。

Then hide the submit buttons with CSS. You can put anything in the label that you want.

当您单击该标签什么的，就会触发它里面的提交按钮，提交表单，与按钮的值的POST阵列中的

When you click on whatever's in the label, it will trigger the submit button inside it and submit the form, with the button's value in the POST array.

还有一个＆LT;输入类型=形象方式＆gt; ，但这是一个完全不同的目的（跟踪它在哪里被点击坐标）

There is also an <input type="image">, but that's for an entirely different purpose (tracking coordinates of where it was clicked).

这篇关于我可以SVG图像按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！