如何沿 SVG 线放置多个均匀间隔的箭头? [英] How to place multiple evenly-spaced arrowheads along an SVG line?
本文介绍了如何沿 SVG 线放置多个均匀间隔的箭头?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 SVG 新手,我想在两点之间画一条直线.到目前为止,我使用此命令进行了管理:
<line x1="50" y1="50" x2="150" y2="150" style="stroke:rgb(255,255,0);stroke-width:2"stroke-dasharray="5,3"/>"
在这条线上添加小三角形或箭头(均匀间隔)以指示方向的最简单方法是什么?
编辑 1:
为了更清楚,我不是在行尾的箭头,而是沿着整条线的多个三角形(均匀间隔).如果可能的话,我想用一个指向虚线方向的三角形替换虚线中的每个虚线.
编辑 2
根据 Phrogz 的建议,我创建了一个如下所示的页面,但没有显示任何内容.我做错了什么?
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><link href="css/com.css" rel="stylesheet" type="text/css"/>头部><body style="background:none;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 70 90"><定义><marker id="t" markerWidth="4" markerHeight="4"orient="自动" refY="2"><path d="M0,0 L4,2 0,4"/></标记></defs><polyline points="0,0 0,50 20,70 40,10 42,8 44,10, 46,14 50,50"/></svg><script type="text/javascript">midMarkers(document.querySelector('polyline'),6);//给定一个多边形/折线,创建沿线的中间点//straightaways"的间距不小于 `spacing` 距离.//沿每个部分的中间点始终均匀分布.//修改多边形/折线.函数 midMarkers(poly,spacing){var svg = poly.ownerSVGElement;for (var pts=poly.points,i=1;i<pts.numberOfItems;++i){var p0=pts.getItem(i-1), p1=pts.getItem(i);var dx=p1.x-p0.x, dy=p1.y-p0.y;var d = Math.sqrt(dx*dx+dy*dy);var numPoints = Math.floor(d/spacing);dx/= numPoints;dy/= numPoints;for (var j=numPoints-1;j>0;--j){var pt = svg.createSVGPoint();pt.x = p0.x+dx*j;pt.y = p0.y+dy*j;pts.insertItemBefore(pt,i);}if (numPoints>0) i += numPoints-1;}}