Dead Space / Overalpping icons

[Diggerz]

Hello,

Is it possible to define the clickable area of an object to that which is not transparent?

In the attached image i've been using shapes to overlay on top of a floorplan. To avoid creating many custom shapes im using squares and rectangles that can be streatched as needed.

However there are instances where the shapes overlap as illustrated in red. In the past ive delt with this by setting the icons to read only and placing transparent buttons over the top in various locations. 

Is there an alternative way to do this where only the part of the icon without transparency is clickable? ideally one that can be bulk applied to specific icons or shapes if possible?

[admin]

This will work but it must be adjusted manually for each element: https://developer.mozilla.org/en-US/docs.../clip-path

[Diggerz]

Thanks,

Could this be set within the svg and then inherited from the svg image?

[admin]

Yes, see: https://developer.mozilla.org/en-US/docs...shape/path

[Diggerz]

Im having trouble with this, i've attached the code for my triangle svg.

i tried adding the clip-path within the svg but i couldnt get it to work.

i can apply a custom css and additional class and it changes the image, eg:

.svg2 {
  clip-path: path(
    "M 0.12695312 0.0390625 C 0.076553175 0.0390625 0.03515625 0.080459425 0.03515625 0.13085938 L 0.03515625 26.644531 C 0.03515625 26.694931 0.076853175 26.740375 0.12695312 26.734375 C 0.035953216 26.643375 28.171875 0.13085938 28.171875 0.13085938 C 28.198278 0.087959418 28.130488 0.0390625 28.080078 0.0390625 L 0.12695312 0.0390625 z "
  );
}

But i was hoping to just add the clip-path to the svg then re upload the icon as an easy way to apply to all the icons ive already placed.

Below is the svg for my triangle:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   preserveAspectRatio="none"
   width="100%"
   height="100%"
   viewBox="0 0 28.135061 26.694839"
   version="1.1"
   id="svg1591"
   sodipodi:docname="LIGHT TRIANGLE OFF 2 stretch 60%.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:dc="http://purl.org/dc/elements/1.1/">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="30.455325"
     inkscape:cx="14.069789"
     inkscape:cy="13.347419"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="1912"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs1585" />
  <metadata
     id="metadata1588">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     transform="matrix(-1,0,0,1,114.60325,-127.92639)">
    <path
       style="opacity:1;fill:#696969;fill-opacity:0.60000002;fill-rule:nonzero;stroke:none;stroke-width:1.1397748;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
       d="m 114.51821,127.92639 c 0.0501,-0.006 0.091,0.0406 0.091,0.091 v 26.51286 c 0,0.0504 -0.0406,0.091 -0.091,0.091 H 86.565124 c -0.05041,0 -0.117393,-0.0481 -0.09099,-0.091 0,0 28.135076,-26.51286 28.044076,-26.60386 z"
       id="rect1024-3-9-7" />
  </g>
</svg>

I did get this to work as an example in a browser. Save the code as svg and open in browser. then the area with color is clickable, the white / transparent are is not:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
   preserveAspectRatio="none"
   width="100%"
   height="100%"
   viewBox="0 0 28.135061 26.694839"
   version="1.1"
   id="svg1591"
   sodipodi:docname="LIGHT TRIANGLE OFF 3 stretch 60%.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:dc="http://purl.org/dc/elements/1.1/">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="30.455325"
     inkscape:cx="14.069789"
     inkscape:cy="13.347419"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="1912"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs1585">
    <clipPath id="clip-path">
      <path
         d="m 114.51821,127.92639 c 0.0501,-0.006 0.091,0.0406 0.091,0.091 v 26.51286 c 0,0.0504 -0.0406,0.091 -0.091,0.091 H 86.565124 c -0.05041,0 -0.117393,-0.0481 -0.09099,-0.091 0,0 28.135076,-26.51286 28.044076,-26.60386 z"
         id="clip-path-shape"/>
    </clipPath>
  </defs>
  <script type="text/javascript">
    function handleClick() {
      alert("Path clicked!");
    }
  </script>
  <g
     id="layer1"
     transform="rotate(-180,57.301625,77.310364)"
     clip-path="url(#clip-path)">
    <path
       style="opacity:1;fill:#696969;fill-opacity:0.60000002;fill-rule:nonzero;stroke:none;stroke-width:1.1397748;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
       d="m 114.51821,127.92639 c 0.0501,-0.006 0.091,0.0406 0.091,0.091 v 26.51286 c 0,0.0504 -0.0406,0.091 -0.091,0.091 H 86.565124 c -0.05041,0 -0.117393,-0.0481 -0.09099,-0.091 0,0 28.135076,-26.51286 28.044076,-26.60386 z"
       id="rect1024-3-9-7"
       pointer-events="visiblePainted"
       onclick="handleClick()"/>
  </g>
</svg>

[admin]

This won't work because the actual clickable element is not the icon itself but a div containing the icon. So the clip path must be applied to the div element.

[Diggerz]

This won't work because the actual clickable element is not the icon itself but a div containing the icon. So the clip path must be applied to the div element.

ok thanks,

i can appy the following css with additional class to each icon which effectivly clips the negative of the image:

Code:

.svg1 { /*  Set the region to be clipped ( negative of the image ) */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%
  );    
}

is it possible to use javascript to apply the css to all icons with the same image src filename? if so would you have an example or another way that avoids manually applying 1 by 1?

[admin]

Try this:

Code:

$(function(){
  $('img[src^="/scada/resources/icons/alarm-active.svg"]').each(function(i, el) {
    el.parentNode.parentNode.classList.add('svg1')
  })
});

[Diggerz]

Thanks, This works great!