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:
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:
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>