如何在SVG线上放置箭头三角形？
在SVG中，要在线上放置箭头三角形，可以使用<marker>元素。<marker>元素定义了一个可重复使用的箭头三角形形状，可以将其附加到线的末端。以下是一个示例代码：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
</marker>
</defs>
<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
</svg>在这个示例中，我们首先在<defs>元素中定义了一个名为arrow的<marker>。viewBox属性定义了箭头三角形的大小，refX和refY属性定义了箭头三角形的位置，markerWidth和markerHeight属性定义了箭头三角形的大小，orient属性定义了箭头三角形的方向。
接下来，我们在<line>元素中使用marker-end属性附加了箭头三角形。url(#arrow)表示使用ID为arrow的<marker>元素。
这个示例中的箭头三角形将会放置在线的末端。你可以根据需要调整<marker>元素的属性以满足你的需求。
相关·内容
2回答
不使用textPath在svg路径上绘制箭头
javascript、css、svg
我会在路径的不同区域放置箭头。实际上，我正在使用textPath。这是否是一种在没有textPath的情况下做同样的事情的方法--我会使用一个箭头来画自己，并通过尊重它的方向将它放置在线上？<!-- Learn about this code on MDN: https://de
浏览 0提问于2019-09-13得票数 2
回答已采纳
1回答
在线的底部或顶部画三角形
javascript、jquery、d3.js
在下面的代码中，我试图在行的底部画一个三角形(表示箭头)：var svgContainer = d3.select("body").append("svg") .attr("stroke-width", 2)
line.append("<
浏览 4提问于2014-11-05得票数 0
回答已采纳
3回答
在div内嵌套svg
html、css、svg
我正在尝试创建一个填充的svg三角形，它将放置在页面的某个位置。示例HTML <div id="inner_container"
浏览 1提问于2013-03-18得票数 12
回答已采纳
1回答
Google Sheets可排序箭头
sorting、google-sheets、filter
为数不多的几个不能转换的东西之一是这些排序箭头。很抱歉，我不知道它们的确切术语，但它们是倒三角形(如箭头)，允许您通过列范围的值快速访问您希望如何对整个表进行排序。如何在Google Sheets中为每个专栏获得相同(或至少相似)的效果？
浏览 2提问于2019-12-29得票数 0
2回答
三角形内的三角形CSS
html、css
📷 我可以让白色三角形没有问题地工作，但我如何在没有完整边框/背景或使用图像的情况下在第一个三角形的顶部放置另一个三角形(绿线)？我只能在白色箭头上得到一个绿色箭头，而这不是我想做的。
浏览 28提问于2020-04-30得票数 3
回答已采纳
1回答
设计DIV箭头轮廓.制作空心三角形
css、html、transparency
现在，我试着用DIV画一个箭头。示例：.arrow-small {bottom: 0;width: 0; border-color: transparent transparent blue transparent;我尝试过的一种方法是创建一个较小的填充三角形，将其放置在大三角形的顶部，这将创建我正在寻找的箭头</em
浏览 7提问于2012-12-31得票数 2
2回答
SVG:如何纠正带有bezier曲线路径的偏离中心标记？
html、svg、bezier、markers
在附加的JSFiddle (以下)中，我们看到一个简单的三角形点，其中一个是二次bezier曲线的控制点。从美学上讲，这幅画有一些不太正确的地方：
箭头相对于路径的曲率是如此之大，对于箭头问题没有令人满意的解决方案(给定当前代码)。现在，一个陪审团可以操
浏览 3提问于2017-02-27得票数 0
回答已采纳
2回答
如何将多个均匀间距的箭头放置在SVG线上？
svg、line、drawing、markers
我是SVG的新手，我试图在两点之间画一条直线。="50" x2="150" y2="150" style="stroke:rgb(255,255,0); stroke-width:2" stroke-dasharray="5,3" />"更清楚的是，我并不是在线的末端有一个箭头，而是沿着整条线有多个三角形(均匀间隔)。如果可
浏览 4提问于2012-08-04得票数 60
回答已采纳
1回答
填充Draw2d触摸中的路径节点
svg、raphael、draw2d-js
我试着做一个箭头连接一个直角和一个路径(三角形)。这是我的密码： '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',
'<rect opacity#000000" stroke="#000" d="m17.41375,36.090939l7.4375,1
浏览 10提问于2014-09-09得票数 0
回答已采纳
2回答
我正在查看用CSS创建的下拉菜单的，我很好奇，，作者是如何在每个菜单的第一个元素周围放置三角形箭头的？transparent; border-bottom: 6px solid #444;但是，作者是如何使它们变成三角形的呢
浏览 0提问于2011-11-14得票数 1
回答已采纳
1回答
CSS三角形背景
html、css、svg、arrows
我想在我的项目中有一个三角形的背景。但我认为如果我能在底部做同样的事情会更好。linear-gradient(4deg, #ff7a7d 300px, transparent 0); min-height: 300px;我在网上找不到关于如何在div中创建一个简单的剪裁的正确信息.我宁愿不使用svg。
浏览 2提问于2019-11-01得票数 0
回答已采纳
2回答
<object>在svg路径上的定位
svg、path
我有很多对象使用相同的svg路径，这基本上是一个箭头。我想在另一个圆形的svg路径上定位对象，这样箭头看起来就像在向外“辐射”。我读了几篇文章，其中说使用<object>对svg提供更多的控制，但我找不到如何将<object>定位到另一个svg <object>路径(循环)。更新:我似乎唯一能在网上找到一个元素到路径上的东西是animationTransform或在路径上动画一些东西，但是我只想将元素放置在另一个元素(路径)上，像这样
浏览 5提问于2014-03-06得票数 1
回答已采纳
1回答
在WP7中停止/启动按钮绑定
wpf、windows-phone-7.1
是否可以(以及如何)通过在XAML中单击来在按钮内绘制箭头或正方形？它必须取决于媒体元素的状态(是否正在播放)。如果这是不可能的，如何在后面的代码中做到这一点？备注:换句话说，在播放音乐时，按钮必须显示一个正方形，否则必须是一个箭头(如三角形)。
浏览 2提问于2012-03-05得票数 0
回答已采纳
2回答
创建箭头型背景div
html、css、svg
我试图支持IE9和up，但更重要的是移动操作系统的安卓4+和iOS 7+
我也愿意使用SVG。我只是不太熟悉它与HTML的集成。
浏览 0提问于2015-06-10得票数 0
回答已采纳
1回答
将SVG形状指向圆周方向
java、processing
就像这样：我所做的：，我设法使SVG图像指向正确的方向，但我似乎不能让它绕着圆圈旋转。为了尝试圆形的解决方案，我决定尝试使用椭圆工具和进行定位。这就是目前的情况：(请注意箭头是如何在圆周和轴线上面对与椭圆不同的方向的-给定中心点是绿色圆的中间) ellipse(x, y
浏览 1提问于2020-09-22得票数 0
3回答
IE中所有屏幕大小的底部0
html、css
我希望我的svg图像在我的块的底部(位置:绝对，底部:0)。但在Internet Explorer中，它不起作用(显示在中心)。我可以将宽度和高度设置为svg，它会以某种方式工作，但它会在另一个屏幕尺寸较小/较大的设备上崩溃。如何解决此问题？谢谢!;}
background-color: #000; position: relative; <div
浏览 1提问于2018-02-07得票数 0
回答已采纳
1回答
在中，如何将实线(而不是虚线)指向后来在时间线上创建的类？
uml、message、sequence-diagram、visual-paradigm
我正在创建一个序列图，我希望该图表如下所示，其中OnlineCart对象被向下放置在时间线上，并有一个指向它的实心箭头：然而，当我在视觉范型上尝试这一点时，如果我使用一条实线，那么预订类就会出现在顶部，并且只有用虚线才会出现在我想要的位置(如第二个图像所示)。
浏览 8提问于2022-09-10得票数 2
2回答
如何在android中创建解锁滑块类型自定义控件？
android、image、custom-controls、slide
如何在android中创建具有自定义控制的解锁滑块？解锁后，将触发一些事件，并将一些文本(如、反馈、)放置在控件的中间。一个图像将放置在该控件的起始位置，该控件将用于幻灯片到末端。结束点一些图像会像箭头一样放置。有人能指导我做这个和一些例子的来源也。
浏览 6提问于2013-11-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
