Improved SVG behaviour

Ideas
7

We need an SVG working group :smiley:
I'm about to run into some scaling issues where dynamic SVGs against a select and compatibility with SVGZ will become a necessity for me.

Try the attached form and svg - it has a bunch of examples. You'll see that this one goes black on deselect in Collect, replace the SVG with the _opt.svg version to fix.

Also in Collect, where you are able to select group plus group contents, for select multiple, tapping different order on group items allows you to select the inner item and outer group, then modify that to just inners or different combos of outer and inner. This one is really wild but I think it's logical as each tap on a group item toggles both the item and its group, but you wouldn't want to let this loose in a form!
eg

  • tap path1 - result: [path1, grp2] (makes sense as both the path1 and group2 were tapped),
  • then tap path2 - result [path1, path2] (makes sense as both path2 (select) and group2 (deselect) were tapped),
  • then tap path 3 - result [path1, path2, path3, grp2] (makes sense as path3 has been selected and group2 reselected)

For select_one, the group takes precedence over the path/object so you can only select the entire group.

mouseover/click/Collect select change intensity depends on your fill opacity and alpha values. colour itself is hardcoded into Collect (orange) and Enketo (blue) but could possibly use the 'highlight' colour as specified in the SVG in future.

I realised what makes Enketo show outlines on select for grouped paths/objects - you have to leave the stroke paint as undefined. Any stroke paint, including 'none' will prevent the outline appearing on select.

  • a path OR object with undefined stroke paint inside a group will show a blue outline in enketo when the group is selected via a path inside it (i.e. you can mouseover highlight but can't select a group via an object inside it).
    • eg obj6/path14 in grp7 (1mm stroke style width, undefined stroke paint) or path11/12/13 in grp6 (0.6mm stroke style width, undefined stroke paint) will show outlines after clicking on a path.
  • the stroke style width is respected by Enketo, compare undefined stroke paint in grp 7 (which has 1mm outlines) to grp8 (5mm outlines)

Enketo object behaviour:

  • A standalone object cannot be mouseovered or selected,
  • a group comprised of only objects can be mouseovered but cannot be selected,
  • a group comprised of objects and paths can be mouseovered on either but only selected on the path,
  • a group comprised of objects / paths / objects & paths where the id of the group and of the objects & paths are in the choice list will
    • show the group id on object mouseover
    • show the path id on path mouseover
    • select the object on object click, no change to fill or outline appearance
    • select the path on path click, fill and outline changes appearance

So to have selectable non-contiguous areas that change appearance, I think the answer is:

  • you need a group of paths, and
  • they need fill with non zero opacity/alpha to change colour in Collect, and
  • they need an undefined stroke paint with a non zero stroke style width to show outline in Enketo, and
  • the select name value = the group id, and
  • the path ids are not in the select list or you will get unexpected values with select-multiple

objectpathgroup.xlsx (582.9 KB)
SVGs.zip (4.4 KB)

1 Like