gpt4 book ai didi

svg - 如何在圆弧路径元素的两端获得箭头?

转载 作者:行者123 更新时间:2023-12-05 06:46:15 28 4
gpt4 key购买 nike

我正在使用 d3.svg.arc() 绘制一段圆,将内半径和外半径设置为相同,并具有一些随机扫角。现在我想在它的两端都有箭头。 marker-start 属性工作正常。但问题在于标记结束。当我运行代码时,我在开始时就得到了两个标记。请帮帮我。

<svg version="1.1">
<defs>
<marker id="endtriangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="starttriangle"
viewBox="0 0 10 10" refX="5" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M -2 5 L 8 0 L 8 10 z" />
</marker>
</defs>
</svg>
<script type="text/javascript">
var arc=d3.svg.arc()
.innerRadius(140)
.outerRadius(140)
.startAngle(0)
.endAngle(Math.PI/3)
d3.select("svg").append("path")
.attr("d",arc)
.attr("transform","translate(200,200)")
.attr("stroke","black")
.attr("marker-end","url(#endtriangle)")
.attr("marker-start","url(#starttriangle)")
.attr("fill","none")
.attr("stroke-width","10")
.attr("id","dimen")
</script>
</body>

最佳答案

这似乎是因为 D3 生成的弧形路径不直接适用于此用例。

这是我从删除大约一半生成的弧形路径数据(d 属性)得到的示例:http://jsfiddle.net/MQNXZ/

顶部路径使用您的示例,底部路径是清理后的静态版本。与 D3 路径数据相比的不同之处在于,D3 变体包括一个额外的直线命令、几个圆弧命令和一个闭合路径命令。

关于svg - 如何在圆弧路径元素的两端获得箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17524140/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com