发表新帖
发表新帖

Can I make an svg image button?

后端 未结
关注
5 1007
轻奢々
轻奢々 2020-12-25 14:11

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

My best attempt so far looks like:
相关标签:
5条回答
  • 一生所求
    2020-12-25 14:31

    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)
  • 悲&欢浪女
    2020-12-25 14:33

    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)
  • 借酒劲吻你
    2020-12-25 14:44

    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)
  • 星月不相逢
    2020-12-25 14:53

    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)
  • 半阙折子戏
    2020-12-25 14:56

    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)
 看不清?
提交回复
热议问题