Question

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

你必须用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

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

1 个答案: