我注意到,如果我想生成没有 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 和库,这感觉太难实现了,除非我忽略了什么。
最佳答案
有一些方法可以使用 CSS 转换来实现这一点,尽管这不会呈现简单的代码。 This would be an example of that .
关于javascript - 基于 SVG 的 UI 是可用的和/或可行的选项吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31196961/