@see http://cgit.drupalcode.org/webform/tree/FEATURE_REQUEST_TEMPLATE.html

Problem/Motivation

To allow users to select a part of a SVG image as a choice/option like states of a country map.

Proposed resolution

I understand there are jQuery /.js options out there for HTML forms.

It would be really useful and efficient to condense form interface for the end users with image based selection and parts of image selection rather text with the almighty webform.

I tried slicing the images in to grid and used the available image selection element with no spaces between them using minor css tweaks it does good job of that for a simple image based form.

However if the image not suitable to be sliced in to a simple grid pattern (e.g. different parts of a body, organ or bone joints) it is not possible with this frontend approach.

Please advise the best way to go forward or kindly direct us in right direction for custom / commercial support etc.

Thanks for the excellent work with this more than a module which opened up the world of possibilities for frontend users like us.

Best regards

Comments

MkSamy created an issue. See original summary.

jrockowitz’s picture

jrockowitz commented

Is this page a good example of how you potentially want to use SVG?

mksamy’s picture

mksamy commented

Thanks for the interest to help. Much appreciated.

It seems that extending the image selection element capability will open world of potentials for webform.
Considering that no real form product like your creation has the drupal power and flexibility, we are hoping to use the webform in a more visual way.

If it can be implemented with just css or js injection it will be perfect.

Demos here
shows how multiple radios/dropdown and checkbox elements in layers can be presented in a visual way( especially in vegetable tray and the skeleton joint example when a joint is selected sub options shown to select) and offers click to select and click again to unselect also multi-select.

Inspiration for this feature request is your image select element which works perfectly as it was intended.

The project we are hoping to use this is for survey focused on collecting data at a clinic or street survey setting where a tablet/phone/ desk top screen with the image will be given to old patient passenger on the move or children who would be comfortable selecting parts of an image rather conventional checkboxes and drop downs.

We don’t want to be too specific on this however your guidance will help many of us in huge way.

Best regards

jrockowitz’s picture

jrockowitz commented

I think the ImageMapster library is outdated and if someone was to re-approach this task today they would use SVG.

I think it would be possible to create an SVG element that works like a select menu by just adding custom attributes to the SVG markup.

The below example adds data-option-* attributes to the SVG element. These attributes could then be parsed via a JavaScript library.

<svg viewBox="0 0 95 50">
  <a xlink:href="#0">
    <circle cx="20" cy="25" r="5" data-Name="shape 1" data-tabindex="0" data-option-value="shape_1" data-option-text="shape 1" data-option-selected />
  </a>
  <a xlink:href="#0">
    <circle cx="40" cy="25" r="5" data-Name="shape 2" data-tabindex="0" data-option-value="shape_2" data-option-text="shape 4"  />
  </a>
  <a xlink:href="#0">
    <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" data-option-value="shape_3" data-option-text="shape 3"  />
  </a>
  <a xlink:href="#0">
    <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" data-option-value="shape_4" data-option-text="shape 4"  />
  </a>
</svg>

This solution depends on how easy it is to add and manage custom attributes in an SVG graphic. It is also possible that there are SVG authoring tools that generate dynamic SVG graphic with rollover and selection behaviors.

jrockowitz’s picture

jrockowitz commented
Status: Active » Closed (won't fix)

This needs to handled in separate contrib module.

jrockowitz’s picture

jrockowitz commented
Status: Closed (won't fix) » Needs work

I am reopening this ticket because I was able to prototype a selectable SVG element.

https://jsfiddle.net/jrockowitz/btakmqed/

jrockowitz’s picture

jrockowitz commented
Status: Needs work » Closed (won't fix)

Even though I like the demo, I still feel that this should be handled via a separate contrib module.

jrockowitz’s picture

jrockowitz commented

People keep ask me about this features so I am going to reopen this ticket and hope someone sponsors it.

Webform logo If you are interested in sponsoring a feature, please read this blog post, create an issue, post a comment, or contact the Webform module for Drupal 8 maintainer.
jrockowitz’s picture

jrockowitz commented
Status: Closed (won't fix) » Active
Mile3’s picture

Mile3 commented

Creating a Feature Request to sponsor development.

Mile3’s picture

Mile3 commented

https://www.drupal.org/project/webform/issues/3081795

jrockowitz’s picture

jrockowitz commented
Status: Active » Closed (duplicate)