CODEWITHSUNDEEP
javascriptd3.jssvg
Toph
Toph

Reputation: 59

adding clickable zones to an svg

png representation of svg circlet

So I've got this circlet, and I want to make the text clickable (3 distinct clickable areas). Is going through raphael.js or d3.js the only way to achieve this? Is something like this normally very time-consuming? I'm not even sure how many hours to budget if I wanted to have someone else do this on upwork. Mostly, I'd like to learn how to do it though.

Upvotes: 1

Views: 332

Answers (1)

davcs86
davcs86

Reputation: 3935

With d3 would be something like:

d3
  .select("svg#svgId")
  .selectAll("text")
  .classed("cursor-pointer", true)
  .on("click", function(){
    var txt = d3.event.target.textContent;;
    var redirectUrl = false;
    switch(txt) {
      case "DESIGNERS:
        redirectUrl = "https://www.example.com";
        break;
      // ... so on
    }
    if (redirectUrl !== false){
      window.location.href = redirectUrl;
    }
  });

in css rules:

.cursor-pointer {
  cursor: pointer;  
}

Check out this example:

d3
  .select("svg#mySVG")
  .selectAll("text")
  .classed("cursor-pointer", true)
  .on("click", function() {
    var txt = d3.event.target.textContent;
    alert("Redirect to: " + txt);
  });
.cursor-pointer {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" width="500" height="40" viewBox="0 0 500 40">

  <text x="0" y="35" font-family="Verdana" font-size="35">
    Hello,
  </text>
  <text x="100" y="35" font-family="Verdana" font-size="35">
    out there
  </text>
</svg>

Upvotes: 1

Related Questions