21

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を使用しないための追加のポイント。

4

6 に答える 6

25

警告：これは少しハッキーですが、私が知る限り、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で送信ボタンを非表示にします。ラベルには好きなものを入れることができます。

ラベルにあるものをクリックすると、その中の送信ボタンがトリガーvalueされ、POST配列にあるボタンを使用してフォームが送信されます。

もありますが<input type="image">、それはまったく別の目的です（クリックされた場所の座標を追跡する）。

于 2012-11-30T17:29:14.737 に答える
11

<button>これは、要素の優れたユースケースのようです。

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

ボタン要素をクリックすると、とまったく同じジョブが実行されるinput[type="submit"]ため、入力を完全に置き換えることができます。このルートを使用する場合はtitle、アクセシビリティの目的で、ボタン内および/またはsvg内にテキストラベルを配置することを検討することもできます。

于 2016-07-11T16:19:26.973 に答える
4

これ、多分：

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

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

于 2012-11-30T17:36:47.207 に答える
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>
于 2012-11-30T17:17:57.240 に答える
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！を配置する必要があります。

于 2013-07-12T21:40:20.183 に答える
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>
于 2022-01-05T03:37:02.227 に答える