How would I target an element that is visible but beneath another element?

Question

I created a circular graphic that is mainly based on pure HTML and CSS. A little JavaScript and JQuery is added for curving text and interaction that is planned for later on.

The problem I have is, that when I click on the upper right element, it is covered in party by the upper left element. So when I check which element is clicked through an alert, I see that for 50% of the upper right element's area, the number of the upper left element is returned.

How would I target precisely the elements that I click on? This is needed for linking to different pages of our web project later on.

I created a JSFiddle to show the problem: https://jsfiddle.net/niklasbuschner/gj67md4u/4/

The code looks like this:

$(document).ready(function() {
  function textRotation() {
    new CircleType(document.getElementById('demo1')).radius(185);
    new CircleType(document.getElementById('demo2')).radius(185);
    new CircleType(document.getElementById('demo3')).radius(185);
  }
  textRotation();
  $('#demo1').children('div').addClass('pie__segment__path-text__rotation1');
  $('#demo3').children('div').addClass('pie__segment__path-text__rotation3');
  $('.pie__segment').on('click', function() {
    var link_target = $(this).data('href');
    alert('KLICK' + link_target);
  });
})

html {
  font-family: Arial;
  font-size: 14px;
}

.pie {
  border-radius: 100%;
  height: calc(var(--size, 400) * 1px);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--size, 400) * 1px);
}

.pie__segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  -webkit-transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
  cursor: pointer;
}

.pie__segment:after,
.pie__segment:before {
  background: var(--bg, #e74c3c);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}

.pie__segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  -webkit-transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.pie__segment:after {
  opacity: var(--over50, 0);
}

.pie__segment .path-text {
  position: absolute;
  left: -82px;
  bottom: 122px;
  color: #fff;
  font-weight: 700;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.pie__segment .path-text span div {
  height: 2.5em !important;
}

.pie__segment .path-text span div span:last-child {
  color: rgba(255, 255, 255, 0.75);
}

.pie__segment .path-text.demo1 {
  transform: rotate(-90deg);
}

.pie__segment__path-text__rotation1 {
  transform: rotate(60deg);
}

.pie__segment .path-text.demo2 {
  transform: rotate(-30deg);
}

.pie__segment .path-text.demo3 {
  transform: rotate(30deg);
}

.pie__segment__path-text__rotation3 {
  transform: rotate(-60deg);
}

.pie-body {
  border-radius: 100%;
  height: 300px;
  width: 300px;
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: #73c6be;
  text-align: center;
  overflow: hidden;
}

.pie-body p {
  line-height: 260px;
  font-size: 1.75em;
  font-weight: 700;
  color: #0896A5;
}

<div class="pie-container" style="position: relative; top: 100px; left: 100px;">
  <div class="pie">
    <div class="pie__segment" data-href="1" style="--offset: 0; --value: 33.33333; --bg: #089baa">
      <div class="path-text demo1">
        <span id="demo1">BEISPIEL EINTRAG +</span>
      </div>
    </div>
    <div class="pie__segment" data-href="2" style="--offset: 33.33333; --value: 33.33333; --bg: #066f7a;">
      <div class="path-text demo2">
        <span id="demo2">NÄCHSTER EINTRAG +</span>
      </div>
    </div>
    <div class="pie__segment" data-href="3" style="--offset: 66.66666; --value: 33.33333; --bg: #044249;">
      <div class="path-text demo3">
        <span id="demo3">WEITERER EINTRAG +</span>
      </div>
    </div>
  </div>
  <div class="pie-body">
    <p>Kernaussage</p>
  </div>
</div>

Answer 1

Here is an example of how you can use svg

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {

  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  var sweepFlag = endAngle > startAngle ? 0 : 1; //sic

  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y
  ].join(" ");

  return d;
}

window.onload = function() {
  let arc1 = document.getElementById("arc1")
  let arc2 = document.getElementById("arc2")
  let arc3 = document.getElementById("arc3")

  arc1.setAttribute("d", describeArc(200, 200, 100, 120, 0));
  arc2.setAttribute("d", describeArc(200, 200, 100, 240, 120));
  arc3.setAttribute("d", describeArc(200, 200, 100, 360, 240));

  let text1 = document.getElementById("text1")
  let text2 = document.getElementById("text2")
  let text3 = document.getElementById("text3")

  let textPath1 = document.getElementById("textPath1")
  textPath1.setAttribute("d", describeArc(200, 200, 95, 120, 0));

  let textPath2 = document.getElementById("textPath2")
  textPath2.setAttribute("d", describeArc(200, 200, 95, 240, 120));

  let textPath3 = document.getElementById("textPath3")
  textPath3.setAttribute("d", describeArc(200, 200, 95, 360, 240));


  [arc1, arc2, arc3, text1, text2, text3].forEach(el => {
    el.addEventListener("click", e => {
      console.log(e.target.getAttribute("link"))
    })
  })
};

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: rgb(36, 41, 46);
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  /*outline: 2px solid lightgreen;*/
  height: 400px;
  width: 400px;
  transform: scale(1);
}

path,
text {
  cursor: pointer;
}

text {
  font-family: arial;
  font-size: 14px;
  fill: #fff;
}

<svg viewBox="0 0 400 400">
  	<circle shape-rendering="geometricPrecision" cx="200" cy="200" r="100" fill="#73c6be" stroke="none" />
		<path shape-rendering="geometricPrecision" id="arc1" fill="none" stroke="#089baa" stroke-width="30" link="Link1.html" />
		<path shape-rendering="geometricPrecision" id="arc2" fill="none" stroke="#066f7a" stroke-width="30" link="Link2.html" />
		<path shape-rendering="geometricPrecision" id="arc3" fill="none" stroke="#044249" stroke-width="30" link="Link3.html" />

		<path id="textPath1" fill="none" stroke="none" />
		<path id="textPath2" fill="none" stroke="none" />
		<path id="textPath3" fill="none" stroke="none" />

	 	<text id="text1">
	    <textPath 
	    	href="#textPath1"
    	 	link="Link1.html" 	    	
	    	startOffset="15%"
	    	>BEISPIEL EINTRAG+</textPath>
  	</text>
    <text id="text2">
	    <textPath 
	    	href="#textPath2"   	
	     	link="Link2.html"
	    	startOffset="10%"
	    	>NACHSTER EINTRAG+</textPath>
		</text>
    <text id="text3">
	    <textPath 
	    	href="#textPath3"
	    	link="Link3.html"
	    	startOffset="10%"
	    	>WEITERER EINTRAG+</textPath>
		</text>
  </svg>