Can I make an svg image button?

2019-02-02 10:21发布

站内问答 / 后端开发
997 5 5

Is there any way of making a POST request when an svg image is clicked?

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?

Extra points for not using javascript.

5条回答
SAY GOODBYE
2楼-- · 2019-02-02 10:36

It's quite impossible without JS, but you can use JS to do it. Attached an onclick() and just use: 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>

and JS (goes within your <head></head> tags):

<script type="text/javascript">
    function submitForm()
    {
        document.getElementById("submittingForm").submit();
    }
</script>
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-02-02 10:47

Warning: This is a little hacky, but as far as I know it's 100% legit, and doesn't need javascript.

Since the label element can also be used to control it's associated input, you could try something like this:

<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.

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.

There is also an <input type="image">, but that's for an entirely different purpose (tracking coordinates of where it was clicked).

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
4楼-- · 2019-02-02 10:49

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/

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
5楼-- · 2019-02-02 10:49

This seems like a great use case for the <button> element.

<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 title inside the svg for accessibility purposes.

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
6楼-- · 2019-02-02 10:52

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!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)