logo标签列表

我能制作一个 SVG 图像按钮吗？

htmlpostbuttonsvg
24

当点击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获得额外积分。

7个回答
27

警告：这种方法有点hacky，但据我所知它是100％合法的，而且不需要JavaScript。

由于

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

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

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

这很棒！谢谢Wesley！ - John Lawrence Aspden
我对<input type="image">这个东西很感兴趣。我该如何将该图像变成内联SVG而不是单独的文件？ - John Lawrence Aspden
1
你需要使用src来链接svg文件以便使用它。我敢肯定这不是你想要的，因为这些输入类型有着非常具体的用途（跟踪点击坐标）。你可能还想采用简单的<input type="radio">设置和一个提交按钮，但这对用户来说多了一次点击操作。 - Wesley Murch
2
我不确定，但在我尝试的所有浏览器中（包括IE和Firefox），它都可以正常工作。请尝试使用此链接：http://jsfiddle.net/XKZJc/1/ - Wesley Murch
在所有三个环境中都可以正常工作。因此我肯定是在我的实际应用程序中某个地方搞错了什么。很抱歉让你困扰了！ - John Lawrence Aspden
显示剩余2条评论
18

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

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

点击按钮元素与使用input[type="submit"]具有完全相同的作用，因此您可以完全替换输入。如果您选择这种方式，您还可以考虑在按钮内部放置文本标签，并/或在svg内部放置title以实现辅助功能。

这太棒了。有没有办法针对不同的伪类（例如 :hover、:active）使用不同的 SVG？ - Daniel Kaplan
1
可能可以！我想你可以在按钮内部呈现多个SVG，并使用CSS在状态更改时显示/隐藏它们。但这会导致一些标记膨胀 - 如果你只是想对SVG进行轻微的更改（例如更改颜色），你可以像button:hover svg { fill: red; }那样简单地设置SVG的填充属性。 - Brad Marshall
4
这个，可能是这样的：
<form action="/test-button" method="POST">
    <input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>

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

3
请注意，base64编码可能会不必要地增加SVG的大小 - 您可以将其保留为UTF-8并嵌入SVG。 <input type="image" src='data:image/svg+xml;utf8,<svg>...</svg>'>。这样做的额外好处是在创建此SVG按钮时需要少一步操作。http://css-tricks.com/probably-dont-base64-svg/ - Ben
这在IE 9及我尝试过的现代版本的Firefox中都可以工作。谢谢。 - aolszowka
4

如果没有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>
好的，但我一点也不懂JavaScript。我该如何附加这个东西？ - John Lawrence Aspden
1
好的，你已经在上面得到了答案，但是如果你想要使用JS（因为它非常灵活），我已经编辑了我的答案并提供了代码。 - Felix Guo
2

这是一个带有闪电图标的简单按钮。

 <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事件。
0
一些答案忘记将输入隐藏起来。这样应该可以完美运行：
只需复制粘贴即可。
<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>
我认为 label 标签上的属性名称是 style。现在它显示为 class。 - SCabralO
0
只需将 onClick 添加到 svg 

<svg onClick={addAddress}>
.....
</svg>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接