点击 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 的加分项。
【问题讨论】：
有些答案忘记隐藏输入。这应该可以完美地工作：
复制粘贴即可。
<label class="cursor: pointer;">
<input type="submit" name="mysubmit" value="val1" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-arrow-down-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0
.5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4
4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1
.5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-
4a.5.5 0 0 1 .708-.708L4 1
3.293V1.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</label>
【讨论】：
这似乎是 <button> 元素的一个很好的用例。
<form action="/test-button" method="POST">
<button>
<svg>
<rect width="100" height="100" >
</svg>
</button>
</form>
单击按钮元素执行与input[type="submit"] 完全相同的工作，因此您可以完全替换输入。如果您走这条路，您还可以考虑在按钮内放置一个文本标签和/或在 svg 内放置一个 title 以实现可访问性。
【讨论】：
这是一个简单的按钮，框内有一个闪电。
<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
}
当你创建一个按钮并且里面有线条并且当你把 onclick 放到父元素上时的问题你没有点击所有的 svg 元素但是你单独点击里面的所有子元素。因此，您需要在 svg 内创建一个具有父元素宽度和高度的矩形并将其隐藏，然后放在那里 onclick！
【讨论】：
没有 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>
【讨论】：
这个，也许：
<form action="/test-button" method="POST">
<input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>
Jsfiddle：http://jsfiddle.net/Xawuv/
【讨论】：
<input type="image" src='data:image/svg+xml;utf8,<svg>...</svg>'>。这有一个额外的好处，即在创建此 SVG 按钮时需要少一步。 css-tricks.com/probably-dont-base64-svg
警告：这有点骇人听闻，但据我所知，它是 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">，但目的完全不同（跟踪点击位置的坐标）。
【讨论】：
src 链接到 svg 文件才能使用它。我很确定这不是您想要的，因为这些输入类型具有非常特定的目的（跟踪点击坐标）。您可能还想使用简单的<input type="radio"> 设置和单个提交按钮，但对于用户来说这是一个额外的点击。