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隐藏提交按钮。您可以在标签中放置任何内容。

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

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

Answer 2

没有JS，这是不可能的，但你可以使用JS来做到这一点。附上onclick()并使用：document.getElementById('formID').submit();。

HTML：

<form action="/test-button" method="POST" id="submittingForm">
   <input name="Submit" type="submit" value="Submit" /> 
   <svg onclick="submitForm();">
     <rect width="100" height="100" >
   </svg> 
</form>

和JS（在<head></head>标签内）：

<script type="text/javascript">
    function submitForm()
    {
        document.getElementById("submittingForm").submit();
    }
</script>

Answer 3

这可能是：

<form action="/test-button" method="POST">
    <input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>

Jsfiddle：http://jsfiddle.net/Xawuv/

Answer 4

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

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

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

Answer 5

这是一个简单的按钮，盒子内有闪电。

 <svg x="167" y="8" cursor="pointer" width="30" height="30"   visibility="visible" >
                <g id="Flash">
                    <g fill="#FFCC00"  stroke="#D57300" stroke-width="2" >
                        <path stroke-linecap="round" d="m 10.311873 9.0776039 9.400261 -7.988867 -0.05562 6.2501137 -2.224914 0.093987 -0.05562 5.5452134 11.402682 -0.04699 -18.522406 16.024725 0.05562 -6.015145 2.169291 -0.09398 -0.05562 -5.874165 -11.51392928 0.04699 z"/>
                    </g>
                </g>    
                <rect width="30" height="30"  opacity="0"  fill="transparent"    fill="url(#Flash)" id="Flash_Button"  onclick="Flash(evt);" />     
    </svg>

这是点击

时的功能脚本

function Flash(){
// post whatever you want inside here

}

当你创建一个按钮并且里面有行时出现问题，当你把它放到父元素上时，你不要点击所有的svg元素，但是你单独点击并且所有的孩子都在里面。所以你需要在svg里面创建一个带有父元素宽度和高度的矩形并隐藏它，然后把它放在onclick上！

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

5 个答案: