我可以制作一個 svg 圖像按鈕嗎？
[英]Can I make an svg image button?
問題描述
單擊 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的額外積分。
6 個解決方案
解決方案1
17 已采納 2012-11-30 17:29:14
警告：這有點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"> ，但這是出於完全不同的目的（跟蹤點擊位置的坐標）。
解決方案2
5 2016-07-11 16:19:26
這似乎是<button>元素的一個很好的用例。
<form action="/test-button" method="POST">
<button>
<svg>
<rect width="100" height="100" >
</svg>
</button>
</form>
單擊按鈕元素執行與input[type="submit"]完全相同的作業，因此您可以完全替換輸入。 如果你走這條路線，你也可以考慮在按鈕內放置一個文本標簽和/或svg內的title以便於訪問。
解決方案3
4 2012-11-30 17:17:57
沒有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>
解決方案4
4 2012-11-30 17:36:47
這可能是：
<form action="/test-button" method="POST">
<input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>
Jsfiddle： http ： //jsfiddle.net/Xawuv/
解決方案5
2 2013-07-12 21:40:20
這是一個簡單的按鈕，盒子內有閃電。
<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上！
解決方案6
0 2022-01-05 03:37:02
有些答案忘記隱藏輸入。 這應該可以完美運行：
直接復制粘貼。
<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>
如何使div的svg背景圖像動態縮放並保持在div的中心
[英]How can I make my div's svg background image scale dynamically and stay in the center of the div
如何在沒有 div 覆蓋的情況下制作具有重疊 svg 邊框的圖像（類似框架）
[英]How can I make a image with overlapping svg border without div overlay (frame like)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.