Могу ли я сделать кнопку изображения svg?

Есть ли способ сделать запрос POST при щелчке изображения svg?

Моя лучшая попытка пока выглядит так:

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

Это черный прямоугольник с кнопкой отправки рядом с ним.

Я хочу, чтобы люди могли выбирать между несколькими изображениями, поэтому это может быть одобренным решением, но есть ли способ сделать изображение, которое при нажатии будет сбрасывать POST?

Дополнительные баллы за использование javascript.

Ответы

Ответ 1

Предупреждение: это немного взломанный, но насколько я знаю, он на 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">, но это совершенно другая цель (координаты отслеживания, где он был нажат).

Ответ 2

Это невозможно без 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>

Ответ 3

Это, может быть:

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

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

Ответ 4

Это похоже на большой вариант использования для элемента <button>.

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

Щелчок по элементу кнопки выполняет то же самое задание, что и input[type="submit"], поэтому вы можете полностью заменить вход. Если вы пройдете этот маршрут, вы можете также рассмотреть возможность размещения текстовой метки внутри кнопки и/или title внутри svg для целей доступности.

Ответ 5

Это простая кнопка с молнией внутри коробки.

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

и вот script для функции, когда вы нажимаете

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

}

Проблема при создании кнопки и внутри нее имеет линии, и когда вы помещаете в родительский элемент, onclick вы не нажимаете на все элементы svg, а вы щелкаете отдельно и все дочерние элементы внутри. так что вам нужно создать прямоугольник внутри svg с шириной и высотой родительского элемента и скрыть его, а после того, как поместить туда onclick!