初探SVG

news2025/1/24 16:17:00

 SVG,可缩放矢量图形(Scalable Vector Graphics)。使用XML格式定义图像。SVG有以下优点:1)可被非常多的工具读取和修改;2)比JPEG和GIF尺寸更小,可压缩性更强;3)可在任何分辨率下被高质量地打印;4)图片质量不下降的情况下被放大;5)文本是可选的,同时也是可搜索的(和时候制作地图);6)可以与JS一起运行。

1 路径 <path>

命令

名称

参数

M

moveto 移动到

(x y)

Z

closepath 关闭路径

(none)

L

lineto 画线到

(x y)

H

horizontal lineto 水平线到

(x)

V

vertical lineto 垂直线到

(y)

A

elliptical arc 椭圆弧

(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

x-axis-rotation:椭圆相对于坐标系的旋转角度。

large-arc-flag:标记绘制大弧(1)还是小弧(0)部分。

sweep-flag:标记向顺时针(1)还是逆时针(0)方向绘制。

C

curveto 三次贝塞尔曲线到

(x1 y1 x2 y2 x y)

S

smooth curveto 光滑三次贝塞尔曲线到

(x2 y2 x y)

Q

Bézier curveto 二次贝塞尔曲线到

(x1 y1 x y)

T

smooth Bézier curveto 光滑二次贝塞尔曲线到

(x y)

表 路径命令

如果指令字母是大写,例如H,则表示坐标位置是绝对位置。如果指令字母小写的,例如h,则表示坐标位置是相对位置。

1.1 贝塞尔曲线

贝塞尔曲线(Bézier curve),是应用于二维图形应用程序的数学曲线,用数学的方式定义一条曲线。由起点、终点、控制点组成。

控制点个数可以是0-n个,当为0个时称为一阶贝塞尔曲线(一条直线),1个控制点的时称为二阶贝塞尔曲线,依次类推。

1.1.1 二阶贝塞尔曲线

图 二阶贝塞尔曲线示意图

二阶贝塞尔曲线实现原理:起点为A,终点为C,控制点为B。连接AB,BC。

并在AB上取点D,BC上取点E,连接DE,取点F,使其满足条件 AD/AB = BE/BC = DF / DE = r。其中F点即为曲线点轨迹点。

图 二阶贝塞尔曲线实现原理

用JS实现二阶贝塞尔曲线实现原理:

图 二阶贝塞尔曲线绘制过程实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="黄名富">
    <title>二阶贝塞尔曲线实现原理</title>
</head>
<body>
<svg width="525" height="310" id="svg">
    <path d="M0,300 Q300 0 500 300" fill="#d3d2d2"/>
    <line id="lineAB" stroke-width="2" stroke="black"/>
    <line id="lineBC" stroke-width="2" stroke="black"/>

    <svg id="pointA">
    <circle r="4" fill="red" cx="4" cy="4"/>
    <text fill="red" x="15" y="14" font-size="20">A</text>
    </svg>

    <svg id="pointB">
    <circle r="4" fill="red" cx="4" cy="4"/>
    <text fill="red" x="15" y="15" font-size="20">B</text>
    </svg>

    <svg id="pointC">
    <circle r="4" fill="red" cx="4" cy="5"/>
    <text fill="red" x="15" y="14" font-size="20">C</text>
    </svg>

    <line stroke="green" stroke-width="2" id="lineDE"/>
    <polyline stroke-width="2" stroke="red" id="pointF" fill="red"/>

</svg>
</body>
</html>

<script>
    function Point(x,y) {
        this.x = x;
        this.y = y;
    }

    const aPoint = new Point(0,300),bPoint = new Point(300,0),cPoint = new Point(500,300);
    let dPoint = new Point(0,0),ePoint = new Point(0,0),fPoint = new Point(0,0);

    function setPosition(r) {
        dPoint.x = r * bPoint.x;
        dPoint.y = aPoint.y * (1-r);
        ePoint.x = r * (cPoint.x - bPoint.x) + bPoint.x;
        ePoint.y = r * cPoint.y;
        fPoint.x = r * (ePoint.x - dPoint.x) + dPoint.x;
        fPoint.y = r * (ePoint.y - dPoint.y) + dPoint.y;
    }

    let r = 0;
    let timeoutId = null;

    (function initSvg() {
        let lineAB = document.querySelector("#lineAB");
        lineAB.setAttribute("x1",aPoint.x);
        lineAB.setAttribute("y1",aPoint.y);
        lineAB.setAttribute("x2",bPoint.x);
        lineAB.setAttribute("y2",bPoint.y);

        let lineBC = document.querySelector("#lineBC");
        lineBC.setAttribute("x1",bPoint.x);
        lineBC.setAttribute("y1",bPoint.y);
        lineBC.setAttribute("x2",cPoint.x);
        lineBC.setAttribute("y2",cPoint.y);

        let pointA = document.querySelector("#pointA")
        pointA.setAttribute("x",aPoint.x);
        pointA.setAttribute("y",aPoint.y - 5);

        let pointB = document.querySelector("#pointB")
        pointB.setAttribute("x",bPoint.x - 4);
        pointB.setAttribute("y",bPoint.y);

        let pointC = document.querySelector("#pointC")
        pointC.setAttribute("x",cPoint.x - 4);
        pointC.setAttribute("y",cPoint.y - 5);
    }());

    (function updateDraw() {
        let lineDE = document.querySelector("#lineDE");
        let pointF = document.querySelector("#pointF");
        setPosition(r);
        lineDE.setAttribute("x1",dPoint.x);
        lineDE.setAttribute("y1",dPoint.y);
        lineDE.setAttribute("x2",ePoint.x);
        lineDE.setAttribute("y2",ePoint.y);
        let point = document.querySelector("#svg").createSVGPoint();
        point.x = fPoint.x;
        point.y = fPoint.y;
        pointF.points.appendItem(point);
        r += 0.001;
        if (timeoutId) clearTimeout(timeoutId);
        if (r <= 1) {
           timeoutId = setTimeout(updateDraw,1);
        }
    }())

</script>

1.2 路径实例

图 路径实例1

<svg width="500" height="240">
    <rect stroke="green" stroke-width="3" width="100%" height="100%" fill="transparent"/>
    <path stroke="blue" d="M0 20 L100 100 H250 V150 Z" fill="red" fill-rule="inherit"/>
    <text x="20" y="180">
        <tspan x="10" dy="0">绝对位置: 路径起始点为(0,20),</tspan>
        <tspan x="10" dy="18">然后直线到(100,100),再水平到</tspan>
        <tspan x="10" dy="18">(100,250),最后垂直到(100,150)</tspan>
    </text>
    <path stroke="black" fill="green" d="M260 20 l100 100 h100 v-100"/>
    <text x="260" y="180">
        <tspan x="260" dy="0">相对位置: 路径起始点为(260,20),</tspan>
        <tspan x="260" dy="18">然后直线到达(360,120),再水平到</tspan>
        <tspan x="260" dy="18">(460,120),最后垂直到(460,20)</tspan>
    </text>
</svg>

图 路径实例2

<svg width="500" height="300">
    <rect stroke="green" stroke-width="3" width="100%" height="100%" fill="transparent"/>
    <!--三次贝塞尔曲线-->
    <path d="M0,300 C200 100 300 0 500 300" fill="red"/>
    <!--二次贝塞尔曲线-->
    <path d="M0,300 Q300 0 500 300" fill="green"/>
    <!--光滑二次贝塞尔曲线-->
    <path d="M0,300 S300 0 500 300" fill="blue"/>
</svg>

1.3 路径与其他标签组合使用

图 path与text组合使用

<svg width="300" height="120">
    <rect width="100%" height="100%" stroke="green" stroke-width="3" fill="transparent"/>
    <defs>
        <path id="path1" d="M20,100 S100 0 300 100"/>
    </defs>
    <text>
        <textPath xlink:href="#path1">这是一个用路径控制文字显示的话</textPath>
    </text>
</svg>

2 滤镜

feBlend

将两个图像或SVG组合为单个图形

feImage

光栅化

feColorMatrix

基于矩阵对通道(RGBA)处理从而影响色值

feMerge

创建累计而上的图像feConvolveMatrix

feComponentTransfer

为每个像素点颜色的转换。

feMorphology

腐蚀或扩张输入图像

feComposite

使用Porter-Duff将两个输入图像合成一个图像

feOffset

相对图形的当前位置来移动图像

feConvolveMatrix

应用矩阵卷积滤波器

feSpecularLighting

镜面反色

feDiffuseLighting

漫反射

feTile

允许以填充输入图像的重复,平铺图案的目标矩阵。

feDisplacementMap

从使用来自图像的像素值in在空间上置换从图像

feTurbulence

烟雾效果

feFlood

生成一层连续的颜色,该颜色完全填充来该元素的过滤器基本区域

feDistantLight

远光源

feGaussianBlur

模糊效果

fePointLight

创建点光源效果

feSpotLight

聚光灯效果

表 SVG可用滤镜

用<filter>标签来定义SVG滤镜。其必须指定id属性。

图 feTurbulence效果

<svg width="300" height="100">
    <filter id="noise">
        <feTurbulence baseFrequency="0.5"/>
    </filter>
    <rect width="100%" height="100%" fill="none" filter="url(#noise)"/>
</svg>

图 多种滤镜组合实现阴影效果

<svg width="600" height="400">
    <filter id="f1" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="20"
                  dy="20" />
        <feGaussianBlur result="blurOut" in="offOut"
                        stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut"
                 mode="normal" />
    </filter>
    <rect width="300" height="200" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1197705.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

科力雷达Lidar使用指南

科力2D Lidar使用指南 作者&#xff1a; Herman Ye Galbot Auromix 版本&#xff1a; V1.0 测试环境&#xff1a; Ubuntu20.04(x86) PC 以及 Ubuntu20.04(Arm) Nvidia Orin 更新日期&#xff1a; 2023/11/11 注1&#xff1a; 本文内容中的硬件由 Galbot 提供支持。 注2&#x…

物联网AI MicroPython学习之语法uzlib解压缩

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; uzlib 介绍 uzlib 模块解压缩用DEFLATE算法压缩的二进制数据 &#xff08;通常在zlib库和gzip存档器中使用&#xff09;&#xff0c;压缩功能尚未实现。 注意&#xff1a;解压缩前&#xff0c;应检查模块内可…

C语言——个位数为 6 且能被 3 整除但不能被 5 整除的三位自然数共有多少个,分别是哪些?

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int i,j0;for(i100;i<1000;i) {if(i%106&&i%30&&i%5!0){printf("%6d",i); j;}}printf("\n一共%d个\n",j);return 0; } %6d起到美化输出格式的作用&#xff…

(一)QML加载离线地图+标记坐标点

1、实现效果 加载离线地图瓦片、鼠标拖拽、滚轮缩放在地图上固定坐标位置标注地名 &#xff08;一&#xff09;QML加载离线地图标记坐标点&#xff1a;MiniMap-mini 2、实现方法 2.1、使用工具下载离线地图 不废话&#xff0c;直接搬别人的砖&#xff0c;曰&#xff1a;他山…

jbase实现申明式事务

对有反射的语言&#xff0c;申明式事务肯定不可少。没必要没个人都try&#xff0c;catch写事务&#xff0c;写的不好的话还经常容易锁表&#xff0c;为此给框架引入申明式事务。申明式既字面意思&#xff0c;在需要事务的方法前面加一个申明&#xff0c;那么框架保证事务。 首…

比亚迪推动启动电池无铅化 车主有福了

时间过得很快&#xff0c;又到了立冬&#xff0c;意味着冬季已经开始。此时的北方已经下起了大雪&#xff0c;即便是艳阳高照的粤北山区&#xff0c;早晚也出现了较大的温差。笔者不禁想起此前做二手车时期的尴尬场面——三年以上的老车&#xff0c;尤其是没有更换过启动电池的…

38 路由的过滤器配置

3.3.断言工厂 我们在配置文件中写的断言规则只是字符串&#xff0c;这些字符串会被Predicate Factory读取并处理&#xff0c;转变为路由判断的条件 例如Path/user/**是按照路径匹配&#xff0c;这个规则是由 org.springframework.cloud.gateway.handler.predicate.PathRoute…

Python实现局部二进制算法(LBP)

1.介绍 局部二进制算法是一种用于获取图像纹理的算法。这算法可以应用于人脸识别、纹理分类、工业检测、遥感图像分析、动态纹理识别等领域。 2.示例 """ 局部二进制算法&#xff0c;计算图像纹理特征 """ import cv2 import numpy as np imp…

Java自学第9课:JSP基础及内置对象

目录&#xff1a; 目录 1 JSP基础知识架构 1 指令标识 1 Page命令 2 Including指令 3 taglib指令 2 脚本标识 1 JSP表达式 2 声明标识 3 代码片段 3 JSP注释 1 HTML注释 2 带有JSP表达式的注释 3 隐藏注释 4 动态注释 4 动作标识 1 包含文件标识 2 请求转发标…

写在 Chappyz 即将上所之前:基于 AI 技术对 Web3 营销的重新定义

前不久&#xff0c;一个叫做 Chappyz 的项目&#xff0c;其生态代币 $CHAPZ 在 Seedify、Poolz、Decubate、ChainGPT、Dao Space 等几大 IDO 平台实现了上线后几秒售罄&#xff0c;并且 Bitget、Gate.io、PancakeSwap 等几大平台也纷纷表示支持&#xff0c;并都将在 11 月 13 日…

浅析移动端车牌识别技术的工作原理及其过程

随着社会经济的发展与汽车的日益普及带来巨大的城市交通压力,在此背景下,智能交通系统成为解决这一问题的关键。而在提出发展无线智能交通系统后,作为智能交通的核心,车牌识别系统需要开始面对车牌识别移动化的现实需求。基于实现车牌识别移动化这一目标,一种基于Android移动终…

报时机器人的rasa shell执行流程分析

本文以报时机器人为载体&#xff0c;介绍了报时机器人的对话能力范围、配置文件功能和训练和运行命令&#xff0c;重点介绍了rasa shell命令启动后的程序执行过程。 一.报时机器人项目结构 1.对话能力范围 (1)能够识别欢迎语意图(greet)和拜拜意图(goodbye) (2)能够识别时间意…

运行npm install卡住不动的几种解决方案

在前端开发经常会遇到运行npm install 来安装工具包一直卡住不动&#xff0c;为此这里提供几种解决方案&#xff0c;供大家参考学习&#xff0c;不足之处还请指正。 第一种方案、首先检查npm代理&#xff0c;是否已经使用国内镜像 // 执行以下命令查看是否为国内镜像 npm con…

基于FANUC工业机器人的坐标系转换、多视角拼接与三维重建

0.简介 总体任务&#xff1a;机械臂末端安装三维相机&#xff0c;绕着工件进行拍摄&#xff0c;并在计算机中将每次拍摄的点云合并在同一个坐标系下&#xff0c;从而获得更加完整全面的点云。机械臂&#xff1a;FANAUC相机&#xff1a;梅卡曼德技术方案&#xff1a;使用相机外…

有趣的 TCP 抢带宽行为

昨天发了一篇 非技术文章&#xff0c;很多人找我讨论&#xff0c;浓缩成一句话&#xff0c;就是 “死道友而不死贫道”&#xff0c;我的简历上写着这些把戏能带来什么&#xff0c;我的 blog 上写着这么做是多么无耻&#xff0c;哈哈。 看看共享链路上如何挤占带宽&#xff1a; …

Mysql数据库 13.SQL语言 触发器

一、触发器&#xff08;操作日志表&#xff09; 1.介绍 不需要主动调用的一种储存过程&#xff0c;是一个能够完成特定过程&#xff0c;存储在数据库服务器上的SQL片段。 对当前表中数据增删改查的一种记录<日志表>&#xff0c;根据触发器自动执行&#xff0c;记录当前…

html+css+javascript打造网页内容浮动导航菜单

1需求分析 前段时间把“圳品”信息发布到网站上了&#xff0c;内容包括四大块&#xff1a; 按分布区域统计分析按产品类别统计分析按认定时间统计分析河池市“圳品”清单 导致网页很长&#xff0c;有同事反映说查看起来不是很方便&#xff0c;于是决定加上一个网页内容浮动导…

x3daudio1_7.dll怎么解决?x3daudio1_7.dll丢失的5个详细处理方法

首先&#xff0c;让我们来了解一下X3DAudio1_7.dll丢失的原因。X3DAudio1_7.dll是一个非常重要的动态链接库文件&#xff0c;它负责处理计算机中的音频输出。然而&#xff0c;由于各种原因&#xff0c;例如软件安装错误、病毒感染、系统升级等&#xff0c;我们可能会遇到X3DAud…

C语言--从键盘输入当月利润I,求应发奖金总数。

题目描述&#xff1a; 企业发放的奖金根据利润提成。利润I低于或等于100000元的&#xff0c;奖金可提成10%; 利润高于100000 元&#xff0c;低于200000元(1000001000000时&#xff0c;超过1000000元的部分按 1%提成。从键盘输入当月利润I,求应发奖金总数。 int main() {int m…

自动驾驶学习笔记(八)——路线规划

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo Beta宣讲和线下沙龙》免费报名—>传送门 文章目录 前言 路线规划 路由元素 路径搜索 最优…