SVG path 标签根据两点和角度绘制弧线

同步发布:https://blog.jijian.link/2020-04-14/svg-arc/

由于功能受限,此处不能放 iframe 嵌入链接,如需看到实施效果,请移步 https://blog.jijian.link/2020-04-14/svg-arc/

解析

<path> 标签应该算是 SVG 中最为强大的标签了,各种图形都可以用他绘制。

本文使用 path 标签的贝塞尔曲线 Q 指令绘制弧线。

用法

<path d="M30 90 Q115 139 200 90"></path>

<path> 标签常用指令:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

绘制线条

常见效果:绘制实线、绘制虚线、绘制弧线、绘制渐变线条、绘制箭头线条。

源码:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 箭头 -->
    <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
      <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;"/>
    </marker>
    <linearGradient id="line-gradient" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#990000" stop-opacity="0" />
      <stop offset="1" stop-color="#990000" stop-opacity="1" />
    </linearGradient>
  </defs>
  <!-- 实线 -->
  <path class="line" d="M30 30 L200 30"></path>
  <!-- 虚线 -->
  <path class="line" d="M30 60 L200 60" style="stroke-dasharray: 5;"></path>

  <!-- 弧线 -->
  <path class="line" d="M30 90 Q115 139 200 90"></path>
  <!-- 渐变线条 -->
  <path class="line" d="M30 120 Q115 169 200 120" style="stroke: url(#line-gradient)"></path>
  <!-- 箭头线条 -->
  <path class="line" d="M30 150 Q115 199 200 150" style="marker-end:url(#arrow)"></path>

  <!-- 无浏览器润色的线条,有锯齿像素 -->
  <path class="line" d="M30 180 Q115 229 200 180" style="shape-rendering: optimizeSpeed;"></path>
</svg>

实际应用

实际应用场景不一定会有详细坐标点,需要我们根据已有条件去计算。

比如:已有开始左边和结束坐标,根据这两个坐标绘制一条弧线。

SVG 绘制弧线:

<path d="M30 90 Q115 139 200 90"></path>

M30 90 :表示开始点 x:30 y:90
Q115 139 :表示控制点在 x:115 y:139
200 90 :表示结束点 x:200 y:90

计算控制点图解:

换算为 JS 算法:

const pos = getPosition ({left: 30, top: 90}, {left: 200, top: 90}, 30);
console.log(pos); // [{"x":115,"y":139},{"x":115,"y":41}]
function getPosition (dot1, dot2, angle) {
  var x1 = dot1.left;
  var y1 = dot1.top;
  var x2 = dot2.left;
  var y2 = dot2.top;
  var PI = Math.PI;

  // 两点间的x轴夹角弧度
  var xAngle=Math.atan2((y2-y1), (x2-x1));
  // 转为角度
  xAngle = 360*xAngle/(2*PI);
  // 两点间的长度
  var L=Math.sqrt((y2-y1)*(y2-y1)+(x2-x1)*(x2-x1));
  // 计算等腰三角形斜边长度
  var L2 = L/2 / Math.cos(angle* 2*PI/360);

  // 求第一个顶点坐标,位于下边
  var val1={};
  // 求第二个顶点坐标,位于上边
  var val2={};
  val1[‘x‘]=x1+Math.round(L2 * Math.cos((xAngle+angle)* 2*PI/360));
  val1[‘y‘]=y1+Math.round(L2 * Math.sin((xAngle+angle)* 2*PI/360));
  val2[‘x‘]=x1+Math.round(L2 * Math.cos((xAngle-angle)* 2*PI/360));
  val2[‘y‘]=y1+Math.round(L2 * Math.sin((xAngle-angle)* 2*PI/360));

  return [val1,val2];
}

应用场景:

总结:path 运用远不止此,比如常见的字体图标,SVG 图标等,都可见 path 标签运用,一些炫酷的动画效果也可以使用 path 标签实现。

原文地址:https://www.cnblogs.com/linx/p/12699687.html

时间: 2024-10-07 23:25:06

SVG path 标签根据两点和角度绘制弧线的相关文章

SVG Path标签 A 参数

A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx:x轴半径ry:y轴半径x-axis-rotation:指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转的角度large-arc-flag:1表示大角度弧线,0为小角度弧线.sweep-flag:1为顺时针方向,0为逆时针方向x:结束点x坐标y:结束点y坐标        

SVG path绘制百分比圆弧,给力啊

利用SVG的circle可以绘制百分比圆弧,但总觉得有点不够高端,相比起来,我更喜欢利用SVG的path来绘制百分比圆弧,因为其中会利用到绘制圆弧的基本数学知识(我已经把数学还给了老师,从网络上抓取别人的成果,进行了改造),这样就觉得很有装逼范. 一.效果图 二.实现方法 页面元素构成 <svg height="108" version="1.1" width="108" xmlns="http://www.w3.org/2000

SVG Path高级教程

课程分为四个方面: 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径,Path字符串是由命令及其参数组组成的字符串,是非常强大的绘图工具. 例如: <path  d="M0,0L10,20C30-10,40,20,100,100"  stroke="red"> 命令汇总 命令 含义 M/m (x,y) 移动当前位置 L/l (x,y) 从当前位置绘制线段到指定位置

Android L New API之Verctor动画 1 —— SVG Path

导入 1.VectorDrawable是Android L中新增的一个API,让你可以创建基于XML的矢量图,并结合AnimatedVectorDrawable来实现动画效果. 2.Android L新增支持Vector标签,可以使用Path创建动画,同时支持SVG格式. SVG 简介 1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)2.SVG 用来定义用于网络的基于矢量的图形3.SVG 使用 XML 格式定义图形4.SVG 图像在放大或改变尺寸的情况下其图形质

svg path详解

svg的<path>标签具有强大的功能,主要包括以下命令 M(move to) 参数:x,y L(line to) 参数:x,y H 参数:x V 参数:y C S Q T Z 参考:

SVG Path路径使用(一)

一.<path> 标签 <path> 标签用来定义路径. 下面的命令可用于路径数据: M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath 注释:以上所有

Base64 URL image CSS &amp; 在线base64 加密/解密 link: $ svg path 线宽:stroke-width

Base64 URL image CSSData URI scheme是在RFC2397中定义的svg path 线宽:stroke-width 在线base64 加密/解密 link: 那么这是什么呢?这是Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片. 在上面的D

使用SVG Path绘图

最近一个项目,需要做个Web版本的设计器,用来进行工厂流水线布局的设计. 项目中采用了SVG.JS来做,但是以前流水线是采用单纯的画线的方式实现.客户提出希望用不同的底纹表示不同的流水线,经过一番调查,最终决定采用Path,用pattern的方式来填充底纹. 但是文档中对pattern的使用描述的比较含糊,通过一些实验,终于弄的比较清楚了.总结一下: 1.path中的X.Y参数是指以整个画面的左上角为(0,0),来设置偏移的.如果设为0,就是从(0,0)进行填充.如果在(20,20)为起点的地方

SpringMVC &lt;mvc:view-controller path=&quot;&quot;/&gt;标签

<mvc:view-controller path=""/>标签的作用 对应WEB-INF目录下面的JSP页面,我们知道是不能直接使用URL访问到.需要通过转发的方式,而我们一般都是在控制器中做转发映射,对应一些我们不需要其他操作的JSP页面,我们可以使用<mvc:view-controller path=""/>来配置,这样就可以不用再控制器中再去做转发映射 没有使用<mvc:view-controller path="&q