如何使用SVG制作箭头

最新推荐文章于 2025-06-09 09:13:51 发布

sun-shadow

最新推荐文章于 2025-06-09 09:13:51 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： SVG画图文章标签： SVG 箭头

本文链接：https://blog.youkuaiyun.com/u013494746/article/details/21016281

SVG画图专栏收录该内容

5 篇文章

订阅专栏

使用SVG的path标签制作箭头：

制作效果图如下：

下面来看详细的代码：

drection.html

<embed src="drection.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

drection.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M0 5 L30 5 L30 0 L40 10 L30 20 L30 15 L0 15 Z" style="fill:blue;stroke:red;stroke-width:1"/>

</svg>