web-dev-qa-db-ja.com

svg画像ボタンを作成できますか？

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

htmlpostbuttonsvg
16
John Lawrence Aspden

警告：これは少しハックですが、私の知る限り、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">もありますが、それはまったく異なる目的（クリックされた場所の座標を追跡する）のためです。

19
Wesley Murch

これは、<button>要素の優れた使用例のようです。

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

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

5
Brad Marshall

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>
4
Felix Guo

これ、たぶん：

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

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

4
Alohci

これは、ボックス内に稲妻があるシンプルなボタンです。

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

2
Chris Bour