javascript - 基于 SVG 的 UI 是可用的和/或可行的选项吗？

Question

我注意到，如果我想生成没有 90 或 45° Angular 的 flex 边的 UI 组件，SVG 图形似乎是唯一的选择。例如，如果我想要一个如下所示的菜单:

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

您必须使用 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>

我的意思是，据我所知，似乎有很多样式是纯 HTML 和 CSS 无法实现的，必须使用 SVG 图形进行填充。

我的问题是，是否有一种纯 HTML 的替代方法来实现这样的用户界面，或者可能有一种更合适的方法来生成这种“感觉”更像是像普通 HTML 一样仅使用 JavaScript 和 CSS 的方法？考虑到当前可用的 API 和库，这感觉太难实现了，除非我忽略了什么。

Answer 1

有一些方法可以使用 CSS 转换来实现这一点，尽管这不会呈现简单的代码。 This would be an example of that .