+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Dead Space / Overalpping icons (/showthread.php?tid=5533)
Dead Space / Overalpping icons - Diggerz - 26.07.2024
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?
RE: Dead Space / Overalpping icons - admin - 26.07.2024
This will work but it must be adjusted manually for each element: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
RE: Dead Space / Overalpping icons - Diggerz - 26.07.2024
Thanks,
Could this be set within the svg and then inherited from the svg image?
RE: Dead Space / Overalpping icons - admin - 26.07.2024
Yes, see: https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/path
RE: Dead Space / Overalpping icons - Diggerz - 26.07.2024
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>RE: Dead Space / Overalpping icons - admin - 26.07.2024
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.
RE: Dead Space / Overalpping icons - Diggerz - 27.07.2024
(26.07.2024, 10:21)admin Wrote: 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?
RE: Dead Space / Overalpping icons - admin - 29.07.2024
Try this:
Code:
$(function(){
$('img[src^="/scada/resources/icons/alarm-active.svg"]').each(function(i, el) {
el.parentNode.parentNode.classList.add('svg1')
})
});RE: Dead Space / Overalpping icons - Diggerz - 30.07.2024
Thanks, This works great!