Html 我可以制作一个 svg 图像按钮吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13649872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I make an svg image button?
提问by John Lawrence Aspden
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的额外积分。
回答by Wesley Murch
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 labelelement 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. You can put anything in the label that you want.
然后用 CSS 隐藏提交按钮。您可以在标签中放入任何您想要的内容。
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 valuein the POST array.
当您单击标签中的任何内容时，它将触发其中的提交按钮并提交表单，该按钮value位于 POST 数组中。
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">，但这是出于完全不同的目的（跟踪点击位置的坐标）。
回答by Brad Marshall
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. If you go this route, you may also consider putting a text label inside the button and/or a titleinside the svg for accessibility purposes.
单击按钮元素执行与 完全相同的工作input[type="submit"]，因此您可以完全替换输入。如果你走这条路，你也可以考虑在按钮内和/或titlesvg内放置一个文本标签，以实现可访问性。
回答by Felix Guo
It's quite impossible without JS, but you can use JS to do it. Attached an onclick()and just use: document.getElementById('formID').submit();.
没有 JS 是不可能的，但是你可以用 JS 来做。附上一个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>
回答by Alohci
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/
回答by Chris Bour
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. 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!
当您创建一个按钮并在其中包含线条时的问题，当您将 onclick 放入父元素时，您不会单击所有 svg 元素，而是单独单击所有子元素并单击其中的所有子元素。所以你需要在 svg 内创建一个具有父元素的宽度和高度的矩形并将其隐藏，然后在那里放置 onclick！
