我可以制作一个 svg 图像按钮吗？
[英]Can I make an svg image button?
问题描述
Is there any way of making a POST request when an svg image is clicked?
单击 svg 图像时，是否有任何方法可以发出 POST 请求？
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.这是一个黑色矩形，旁边有一个提交按钮。
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?我想让人们在多个图像之间进行选择，所以这可能是一个不错的解决方案，但是有没有办法制作一个图像，当点击时，会触发一个 POST？
Extra points for not using javascript.不使用javascript的额外积分。
6 个解决方案
解决方案1
17 已采纳 2012-11-30 17:29:14
Warning: This is a little hacky, but as far as I know it's 100% legit, and doesn't need javascript. 警告：这有点hacky，但据我所知它是100％合法，并且不需要javascript。
Since the label element can also be used to control it's associated input, you could try something like this: 由于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>
Then hide the submit buttons with CSS. 然后用CSS隐藏提交按钮。 You can put anything in the label that you want. 您可以在标签中放置任何所需的内容。
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. 当您单击标签中的任何内容时，它将触发其中的提交按钮并提交表单，并在POST数组中使用按钮的value 。
There is also an <input type="image"> , but that's for an entirely different purpose (tracking coordinates of where it was clicked). 还有一个<input type="image"> ，但这是出于完全不同的目的（跟踪点击位置的坐标）。
解决方案2
5 2016-07-11 16:19:26
This seems like a great use case for the <button> element. 这似乎是<button>元素的一个很好的用例。
<form action="/test-button" method="POST">
<button>
<svg>
<rect width="100" height="100" >
</svg>
</button>
</form>
Clicking the button element performs the exact same job as input[type="submit"] , so you can replace the input entirely. 单击按钮元素执行与input[type="submit"]完全相同的作业，因此您可以完全替换输入。 If you go this route, you may also consider putting a text label inside the button and/or a title inside the svg for accessibility purposes. 如果你走这条路线，你也可以考虑在按钮内放置一个文本标签和/或svg内的title以便于访问。
解决方案3
4 2012-11-30 17:17:57
It's quite impossible without JS, but you can use JS to do it. 没有JS，这是不可能的，但你可以使用JS来做到这一点。 Attached an onclick() and just use: document.getElementById('formID').submit(); 附加一个onclick()并使用： document.getElementById('formID').submit(); . 。
HTML: 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>
and JS (goes within your <head></head> tags): 和JS（在你的<head></head>标签内）：
<script type="text/javascript">
function submitForm()
{
document.getElementById("submittingForm").submit();
}
</script>
解决方案4
4 2012-11-30 17:36:47
This, maybe: 这可能是：
<form action="/test-button" method="POST">
<input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>
Jsfiddle: http://jsfiddle.net/Xawuv/ Jsfiddle： http ： //jsfiddle.net/Xawuv/
解决方案5
2 2013-07-12 21:40:20
This is a simple button with a lightning inside the box. 这是一个简单的按钮，盒子内有闪电。
<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>
and here is the script for the fucntion when you click 这是你点击时的功能脚本
function Flash(){
// post whatever you want inside here
}
The problem when you create a button and inside it has lines and when you put to the parent element the onclick you don't click all the svg element but you click separately and all children inside. 当您创建一个按钮并且在其中有线条时，当您将其放入父元素时，您不会单击所有svg元素，而是单独单击并且所有子项都在其中。 so you need to create a rect inside the svg with the width and the height of the parent element and hide it, and after put there the onclick! 所以你需要在svg里面创建一个带有父元素宽度和高度的矩形并隐藏它，然后把它放在onclick上！
解决方案6
0 2022-01-05 03:37:02
Some answers forgot to make the input hidden.有些答案忘记隐藏输入。 This should work perfectly:这应该可以完美运行：
Just copy paste.直接复制粘贴。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.