Puis-je créer un bouton d'image svg?

Est-il possible de faire une requête POST quand une image svg est cliqué?

Ma meilleure tentative ressemble tellement loin:

<form action="/test-button" method="POST">
   <input name="Submit" type="submit" value="Submit" /> 
   <svg  >
     <rect width="100" height="100" >
   </svg> 
</form>

Qui est un rectangle noir avec un bouton à côté.

Je veux permettre aux gens de choisir entre plusieurs images, donc cela peut être un ok de solution, mais est-il possible de faire une image qui, lorsqu'il est cliqué, se déclenche un POST?

Des points supplémentaires pour ne pas utiliser de javascript.

source d'informationauteur John Lawrence Aspden

  1. 16

    Avertissement: C'est un peu hacky, mais pour autant que je sais que c'est 100% legit, et n'a pas besoin de javascript.

    Depuis le label élément peut également être utilisé pour le contrôle de l'entrée, vous pouvez essayer quelque chose comme ceci:

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

    Cachez les boutons de soumission avec les CSS. Vous pouvez mettre n'importe quoi dans l'étiquette que vous voulez.

    Lorsque vous cliquez sur tout ce qui est dans l'étiquette, il va déclencher le bouton "soumettre" à l'intérieur et soumettre le formulaire avec le bouton value dans l'après tableau.

    Il y a aussi un <input type="image">mais c'est pour un tout autre but (suivi des coordonnées de l'endroit où il a été cliqué).

  2. 4

    C'est tout à fait impossible sans JS, mais vous pouvez utiliser du JS pour faire ça. Ci-joint un onclick() et il suffit d'utiliser: 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>

    et JS (passe au sein de votre <head></head> tags):

    <script type="text/javascript">
    function submitForm()
    {
        document.getElementById("submittingForm").submit();
    }
</script>
  3. 3

    Ce, peut-être:

    <form action="/test-button" method="POST">
    <input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>

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

  4. 3

    Cela semble être une bonne utilisation de <button> élément.

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

    Cliquant sur le bouton de l'élément effectue exactement le même travail que input[type="submit"]de sorte que vous pouvez remplacer la saisie entièrement. Si vous suivez cette voie, vous pouvez également envisager de placer une étiquette de texte à l'intérieur du bouton et/ou un title à l'intérieur du svg pour l'accessibilité des fins.

  5. 2

    C'est un simple bouton avec un éclair à l'intérieur de la boîte. 

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

    et voici le script pour le fucntion lorsque vous cliquez sur 

    function Flash(){
//post whatever you want inside here

}

    Le problème lorsque vous créez un bouton et à l'intérieur, il dispose de lignes et quand vous les mettez à l'élément parent le onclick vous ne cliquez pas sur toutes les un élément svg mais vous cliquez sur séparément, et tous les enfants à l'intérieur. donc, vous avez besoin pour créer un rectangle à l'intérieur du svg avec la hauteur et la largeur de l'élément parent et de le cacher, et après y mettre la onclick!