CODEWITHSUNDEEP
javascripthtmlcssd3.jssvg
Patrick Roberts
Patrick Roberts

Reputation: 51866

Is SVG-Based UI an available and / or viable option?

I've noticed that SVG graphics seem to be the only option if I want to generate UI components that have curved sides without 90 or 45° angles. For example if I want a menu that looks like this:

http://puu.sh/iLjrq/89724cab83.png

You'd have to do all this with d3.js:

var data = [
  {
    weight: 1,
    label: "Home"
  },
  {
    weight: 1,
    label: "Gallery"
  },
  {
    weight: 1,
    label: "Articles"
  },
  {
    weight: 1,
    label: "Author"  
  }
];

var pie = d3.layout.pie()
  .value(function (datum) {
    return datum.weight;
  })
  .startAngle(Math.PI * 1 / 2)
  .endAngle(Math.PI * 3 / 2);

var arc = d3.svg.arc()
  .outerRadius(200)
  .innerRadius(140);

var svg = d3.select("body")
  .append("svg")
    .attr({
      width: 404,
      height: 204
    })
  .append("g")
    .attr("transform", "translate(202,2)");

var g = svg.selectAll("g > g")
  .data(pie(data))
  .enter().append("g")
    .attr("class", "arc");

g.append("path")
  .attr("d", arc);

g.append("text")
  .attr("transform", function (g) {
    var angle = (g.startAngle + g.endAngle) * 90 / Math.PI;
    return "translate(" + arc.centroid(g) + ") rotate(" + ((angle + 90) % 180 - 90) + ")";
  })
  .attr("text-anchor", "middle")
  .attr("dy", ".25em")
  .text(function (g) {
    return g.data.label;
  });

$("svg").on("click", ".arc", function (event) {
  alert($(this).text());
});
svg {
  display: block;
  margin: auto;
}

.arc {
  fill: rgb(128,128,255);
  stroke: #000;
  stroke-width: 1.5px;
  cursor: pointer;
}

.arc:hover {
  fill: rgb(220,220,100);
}

.arc:active {
  fill: rgb(255,255,128);
}

text {
  fill: #000;
  stroke: none;
  font-weight: bold;
  font-family: Verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

My point is, there seem to be a lot of styles that pure HTML and CSS cannot achieve to my knowledge, and must be polyfilled using SVG graphics.

My question is, is there a pure HTML alternative to achieve a user interface like this, or perhaps a more appropriate way to approach generating this that "feels" more like using just JavaScript and CSS like normal HTML? This feels overly difficult to achieve given the currently existing APIs and libraries available, unless there's something I've overlooked.

Upvotes: 1

Views: 658

Answers (1)

E. Serrano
E. Serrano

Reputation: 5014

There are ways to achieve this using CSS transforms, though that wouldn't render simple code. This would be an example of that.

Upvotes: 3

Related Questions