Skip to content
This repository has been archived by the owner on Aug 10, 2024. It is now read-only.

Enlarge the clickable area of a shape

Jump to bottom
bartbutenaers edited this page Nov 21, 2021 · 1 revision

Sometimes it is useful to enlarge the clickable area of an SVG shape. For example when a floorplan contains rather small clickable icons, it is hard to touch them at once.

Fitt´s law states "the larger and closer the touch or click target is, the less time it will require the user to interact with it"...

This tutorial explains how to workaround this, by adding a clickable transparent circle on top of the SVG shape. The center of the transparent circle should match the center of the SVG shape, to make sure the clickable area has the same size on all different sides of the SVG shape.

For example let's enlarge the clickable area of a FontAwesome light bulb icon:

  1. Put a larger (transparent) circle on top of the icon:

    <svg x="0" y="0" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text id="camera_living" x="50" y="50" font-family="FontAwesome" fill="orange" stroke="black" font-size="45" text-anchor="middle" alignment-baseline="middle" stroke-width="1">fa-lightbulb-o</text>
  <circle cx="50" cy="50" r="40" stroke="none" style="fill-opacity:0.0" id="transparent_circle" />
</svg>

  2. Apply a click event to the circle:

    image

  3. And now you have a larger clickable area around the icon:

    clickable_area

Here is the example flow:

[{"id":"62359e8aa20260fb","type":"ui_svg_graphics","z":"dd961d75822d1f62","group":"28cdac6db4804909","order":14,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <text id=\"camera_living\" x=\"50\" y=\"50\" font-family=\"FontAwesome\" fill=\"orange\" stroke=\"black\" font-size=\"45\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\">fa-lightbulb-o</text>\n  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"none\" style=\"fill-opacity:0.0\" id=\"transparent_circle\" />\n</svg>","clickableShapes":[{"targetId":"#transparent_circle","action":"click","payload":"#transparent_circle","payloadType":"str","topic":"#transparent_circle"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":true,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}","name":"","x":470,"y":1460,"wires":[["d7f843684362d937"]]},{"id":"d7f843684362d937","type":"debug","z":"dd961d75822d1f62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":1460,"wires":[]},{"id":"28cdac6db4804909","type":"ui_group","name":"SVG demo - enlarge clickable area","tab":"3667e211.c08f0e","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"3667e211.c08f0e","type":"ui_tab","name":"Showcase","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Remarks:

  • We set the transparancy to 0, instead of setting the fill color to "none". Indeed in the latter case the browser will not render the circle, so it wouldn't accept any browser events. Which means the (invisible) circle wouldn't be clickable anymore, which is not what we want here...
  • With non-SVG element you could increase the CSS padding of the element, to increase the clickable area. However SVG elements don't support padding. That is a pity, because applying a simple CSS style to an element would have been much cleaner compared to adding transparant circles everywhere ...
Clone this wiki locally