当前位置： 首页 > news >正文

前端基础（四十二）：SVG入门

news 来源：原创 2024/5/7 19:30:19

SVG - viewBox

在这里插入图片描述

属性&值描述
svg width=“320” height=“200”
viewBox=“0 0 100 100”		相当于把viewBox区域整体放大了2倍,并居中
<svg width="320" height="200" viewBox="0 0 100 100">
	<rect x="0" y="0" width="50" height="50" fill="red" />
    <rect x="50" y="50" width="50" height="50" fill="yellow" />
</svg>

基本形状

在这里插入图片描述

<svg width="240" height="250">
    <rect x="10" y="40" rx="10" ry="10" width="30" height="30" stroke="black" fill="red" stroke-width="5" />
    <circle cx="90" cy="55" r="20" stroke="red" fill="yellow" stroke-width="5" />
    <ellipse cx="180" cy="55" rx="30" ry="20" stroke="red" fill="transparent" stroke-width="5" />
    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5" />
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange"
        fill="transparent" stroke-width="5" />
    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green"
        fill="transparent" stroke-width="5" />
    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5" />
</svg>

Path 直线命令

在这里插入图片描述

属性描述
M画笔 - 起始位置
L画线 - 终点位置
H画线 - 绘制水平线
V画线 - 绘制垂直线
Z画线 - 闭合路径
<svg width="160" height="180">
    <path d="M 10 120 H 100 V 140 L 50 160 Z" fill="#00ff0f" stroke="blue" stroke-width="2" />
    <circle cx="10" cy="120" r="2" fill="red" />
    <text x="10" y="120" font-size="8" fill="orange">M(x1, y1) - (10, 120)</text>
    <circle cx="100" cy="120" r="2" fill="red" />
    <text x="100" y="120" font-size="8" fill="orange">H(hx, y1) - 100</text>
    <circle cx="100" cy="140" r="2" fill="red" />
    <text x="100" y="140" font-size="8" fill="orange">V(hx, vy) - 140</text>
    <circle cx="50" cy="160" r="2" fill="red" />
    <text x="50" y="160" font-size="8" fill="orange">L(x2, y2) - (50, 160)</text>
</svg>

Path 三次贝塞尔曲线

在这里插入图片描述

属性描述
C三次贝塞尔曲线
S用来创建与前面一样的贝塞尔曲线
<svg width="200" height="180">
    <path d="M10,100 C50,80 70,160 100,110 S150,150 180,80 L120,120" stroke="black" fill="transparent" />

    <circle cx="10" cy="100" r="2" fill="red" />
    <text x="10" y="100" font-size="8" fill="orange">M</text>

    <line x1="50" y1="80" x2="70" y2="160" stroke="orange" stroke-width="1" />

    <circle cx="50" cy="80" r="2" fill="red" />
    <text x="50" y="80" font-size="8" fill="orange">C1</text>

    <line x1="70" y1="160" x2="100" y2="110" stroke="orange" stroke-width="1" />

    <circle cx="70" cy="160" r="2" fill="red" />
    <text x="70" y="160" font-size="8" fill="orange">C2</text>

    <circle cx="100" cy="110" r="2" fill="red" />
    <text x="100" y="110" font-size="8" fill="orange">C3</text>

    <line x1="150" y1="150" x2="180" y2="80" stroke="orange" stroke-width="1" />

    <circle cx="150" cy="150" r="2" fill="red" />
    <text x="150" y="150" font-size="8" fill="orange">S1</text>

    <circle cx="180" cy="80" r="2" fill="red" />
    <text x="180" y="80" font-size="8" fill="orange">S2</text>

    <circle cx="120" cy="120" r="2" fill="red" />
    <text x="120" y="120" font-size="8" fill="orange">L</text>
</svg>

Path 二次贝塞尔曲线

在这里插入图片描述

属性描述
Q二次贝塞尔曲线
T用来创建与前面一样的贝塞尔曲线
<svg width="200" height="200">
    <path d="M 10 100 Q 50 80 70 160 T 180 80 L 120 120" stroke="black" fill="transparent" />

    <circle cx="10" cy="100" r="2" fill="red" />
    <text x="10" y="100" font-size="8" fill="orange">M</text>

    <line x1="50" y1="80" x2="70" y2="160" stroke="orange" stroke-width="1" />

    <circle cx="50" cy="80" r="2" fill="red" />
    <text x="50" y="80" font-size="8" fill="orange">Q1</text>

    <circle cx="70" cy="160" r="2" fill="red" />
    <text x="70" y="160" font-size="8" fill="orange">Q2</text>

    <circle cx="180" cy="80" r="2" fill="red" />
    <text x="180" y="80" font-size="8" fill="orange">T</text>

    <circle cx="120" cy="120" r="2" fill="red" />
    <text x="120" y="120" font-size="8" fill="orange">L</text>
</svg>

弧形

在这里插入图片描述

属性描述
Arx ry x-axis-rotation large-arc-flag sweep-flag x y
x-axis-rotationx 轴旋转角度
large-arc-flag角度大小,决定弧线是大于还是小于 180 度,0 表示小角度弧,1 表示大角度弧
sweep-flag弧线方向,0 表示从起点到终点沿逆时针画弧,1 表示从起点到终点沿顺时针画弧
<svg width="500" height="260">
    <text x="300" y="110" font-family="serif" font-size="10">直线方程: y = 0.2x + 100</text>

    <path d="M 20,104
             L 70,114
             A 50,60 0 1 0 150,130
             L 200,140
             A 30,20 60 0 1 300,160
             L 400,180" stroke="black" fill="#00ff00" stroke-width="5" />

    <circle cx="20" cy="104" r="2" fill="#ff00ff" />
    <text x="20" y="104" font-size="8" fill="#ff00ff">M(20, 104)</text>

    <circle cx="70" cy="114" r="2" fill="blue" />
    <text x="70" y="114" font-size="8" fill="blue">L1(70, 114)</text>

    <circle cx="150" cy="130" r="2" fill="orange" />
    <text x="150" y="130" font-size="8" fill="orange">C1(150, 130)</text>

    <circle cx="200" cy="140" r="2" fill="blue" />
    <text x="200" y="140" font-size="8" fill="blue">L2(200, 140)</text>

    <circle cx="300" cy="160" r="2" fill="orange" />
    <text x="300" y="160" font-size="8" fill="orange">C2(300, 160)</text>

    <circle cx="400" cy="180" r="2" fill="blue" />
    <text x="400" y="180" font-size="8" fill="blue">L3(400, 180)</text>
</svg>

填充和边框

在这里插入图片描述

属性描述
fill-rule定义如何给图形重叠的区域上色
stroke-miterlimit定义什么情况下绘制或不绘制边框连接的miter效果
stroke-dashoffset定义虚线开始的位置
<svg width="500" height="230">
    <text x="400" y="20">填充和边框</text>

    <rect x="0" y="0" width="60" height="60" />
    <rect x="30" y="30" width="60" height="60" stroke="red" stroke-width="30" stroke-opacity="0.5" fill="blue"
        fill-opacity="0.5" stroke-linejoin="miter" />
    <text x="16" y="25" font-size="8">fill="blue"</text>
    <text x="16" y="40" font-size="8">fill-opacity="0.5"</text>
    <text x="16" y="55" font-size="8">stroke="red"</text>
    <text x="16" y="70" font-size="8">stroke-width="30"</text>
    <text x="16" y="85" font-size="8">stroke-opacity="0.5"</text>
    <text x="16" y="100" font-size="8">stroke-linejoin="miter"</text>

    <rect x="130" y="30" width="60" height="60" stroke="red" stroke-width="30" stroke-opacity="0.5" fill="blue"
        fill-opacity="0.5" stroke-linejoin="bevel" />
    <text x="116" y="25" font-size="8">fill="blue"</text>
    <text x="116" y="40" font-size="8">fill-opacity="0.5"</text>
    <text x="116" y="55" font-size="8">stroke="red"</text>
    <text x="116" y="70" font-size="8">stroke-width="30"</text>
    <text x="116" y="85" font-size="8">stroke-opacity="0.5"</text>
    <text x="116" y="100" font-size="8">stroke-linejoin="bevel"</text>

    <rect x="230" y="30" width="60" height="60" stroke="red" stroke-width="30" stroke-opacity="0.5" fill="blue"
        fill-opacity="0.5" stroke-linejoin="round" />
    <text x="216" y="25" font-size="8">fill="blue"</text>
    <text x="216" y="40" font-size="8">fill-opacity="0.5"</text>
    <text x="216" y="55" font-size="8">stroke="red"</text>
    <text x="216" y="70" font-size="8">stroke-width="30"</text>
    <text x="216" y="85" font-size="8">stroke-opacity="0.5"</text>
    <text x="216" y="100" font-size="8">stroke-linejoin="round"</text>

    <line x1="20" y1="130" x2="110" y2="130" stroke="blue" stroke-width="30" stroke-linecap="butt" />
    <line x1="20" y1="130" x2="110" y2="130" stroke="red" />
    <text x="22" y="140" font-size="8">stroke-linecap="butt"</text>


    <line x1="20" y1="170" x2="110" y2="170" stroke="blue" stroke-width="30" stroke-linecap="square" />
    <line x1="20" y1="170" x2="110" y2="170" stroke="red" />
    <text x="22" y="180" font-size="8">stroke-linecap="square"</text>

    <line x1="20" y1="210" x2="110" y2="210" stroke="blue" stroke-width="30" stroke-linecap="round" />
    <line x1="20" y1="210" x2="110" y2="210" stroke="red" />
    <text x="22" y="220" font-size="8">stroke-linecap="round"</text>

    <text x="130" y="125" font-size="8">【stroke-dasharray="10,5"】第一个用来表示填色区域的长度,第二个用来表示非填色区域的长度</text>
    <line x1="130" y1="130" x2="480" y2="130" stroke="red" stroke-dasharray="10,5" />
    <text x="130" y="140" font-size="8">【stroke-dasharray="2,8,12"】1.填色区域的长度;2.非填色区域的长度;3.填色区域的长度;</text>
    <line x1="130" y1="145" x2="480" y2="145" stroke="red" stroke-dasharray="2,8,15" />
</svg>

线性渐变

在这里插入图片描述

<svg width="120" height="260">
    <defs>
        <linearGradient id="linear-gradient1" x1="0" y1="1" x2="0.5" y2="1">
            <stop offset="0%" stop-color="red" stop-opacity="1" />
            <stop offset="50%" stop-color="green" stop-opacity="1" />
            <stop offset="100%" stop-color="blue" stop-opacity="1" />
        </linearGradient>
        <linearGradient id="linear-gradient2" x1="0" y1="1" x2="0.5" y2="1" spreadMethod="repeat">
            <stop offset="0%" stop-color="red" stop-opacity="1" />
            <stop offset="50%" stop-color="green" stop-opacity="1" />
            <stop offset="100%" stop-color="blue" stop-opacity="1" />
        </linearGradient>
        <style>
            #linear-rect1 {
                fill: url(#linear-gradient1);
            }
        </style>
    </defs>

    <rect id="linear-rect1" x="10" y="30" rx="5" ry="5" width="100" height="100" />

    <rect x="10" y="140" rx="5" ry="5" width="100" height="100" fill="url(#linear-gradient2)" />
    <text x="15" y="160" font-size="8">spreadMethod="repeat"</text>
</svg>

径向渐变

在这里插入图片描述

<svg width="120" height="260">
    <defs>
        <radialGradient id="radial-gradient1" fx="0.4" fy="0.4" cx="0.6" cy="0.6" r="0.5">
            <stop offset="0%" stop-color="red" stop-opacity="1" />
            <stop offset="50%" stop-color="green" stop-opacity="1" />
            <stop offset="100%" stop-color="blue" stop-opacity="1" />
        </radialGradient>
        <radialGradient id="radial-gradient2" fx="0.4" fy="0.4" cx="0.6" cy="0.6" r="0.5" spreadMethod="repeat">
            <stop offset="0%" stop-color="red" stop-opacity="1" />
            <stop offset="50%" stop-color="green" stop-opacity="1" />
            <stop offset="100%" stop-color="blue" stop-opacity="1" />
        </radialGradient>
        <style>
            #radial-rect1 {
                fill: url(#radial-gradient1);
            }
        </style>
    </defs>

    <rect id="radial-rect1" x="10" y="30" rx="5" ry="5" width="100" height="100" />

    <rect x="10" y="140" rx="5" ry="5" width="100" height="100" fill="url(#radial-gradient2)" />
    <text x="15" y="160" font-size="8">spreadMethod="repeat"</text>
</svg>

图案

在这里插入图片描述

<svg width="250" height="250">
    <defs>
        <pattern id="pattern" x="0" y="0" width=".25" height=".25">
            <circle cx="25" cy="25" r="20" />
        </pattern>
    </defs>

    <rect x="20" y="40" width="200" height="200" stroke="black" fill="url(#pattern)" />
</svg>

基础变形

在这里插入图片描述

属性描述
translate平移
rotate旋转
scale缩放
skewX skewY斜切
<svg width="250" height="250">
    <g fill="red" transform="translate(30,40) rotate(45) scale(2) skewX(45) skewY(36)">
        <rect x="0" y="0" width="15" height="15" />
        <rect x="20" y="0" width="15" height="15" />
    </g>
</svg>

剪切

在这里插入图片描述

<svg width="200" height="200">
    <defs>
        <clipPath id="cut-react">
            <rect x="50" y="50" width="50" height="50" />
        </clipPath>
    </defs>
    <circle cx="100" cy="100" r="50" fill="red" clip-path="url(#cut-react)" />
</svg>

遮罩

在这里插入图片描述

<svg width="150" height="200">
    <defs>
        <linearGradient id="linear-gradient">
            <stop offset="0" stop-color="red" stop-opacity="1" />
            <stop offset="1" stop-color="green" stop-opacity="1" />
        </linearGradient>
        <mask id="mask">
            <rect x="30" y="70" width="100" height="100" fill="url(#linear-gradient)" />
        </mask>
    </defs>
    <rect x="10" y="50" width="100" height="100" fill="yellow" />
    <rect x="30" y="70" width="100" height="100" fill="url(#linear-gradient)" mask="url(#mask)" />
</svg>

嵌入光栅图像

在这里插入图片描述

<svg width="240" height="160">
    <rect x="10" y="40" width="100" height="100" stroke="red" fill="none" />
    <image x="10" y="40" width="100" height="100" xlink:href="https://dummyimage.com/600x400" />
    <rect x="120" y="40" width="100" height="100" stroke="red" fill="none" />
    <image x="120" y="40" width="100" height="100" xlink:href="https://dummyimage.com" />
</svg>

相关文章：

  • 【.Net实用方法总结】 整理并总结System.IO中StringReader类及其方法介绍
  • Dapr 的 gRPC组件(又叫可插拔组件)的提案
  • Centos 8 安装 nginx
  • 【WSN】基于LGNDO算法实现传感器物理路由优化附matlab代码
  • 数据结构初步（六）- 复杂链表的分析与C语言实现
  • C语言-文件操作(最全)(二十一)
  • 时空数据挖掘五（城市计算）
  • mysql进阶：企业数据库安全防护方案
  • 会员营销体系构建需要满足的四个条件
  • C++----unordered_map unordered_set使用及模拟
  • R统计绘图-变量分组相关性网络图(igraph)
  • JUC并发编程系列详解篇五（线程基础理论进阶）
  • 设计模式 人类父母和猫孩子的关系理解观察者模式（发布订阅模式）
  • 【java核心技术】Java知识总结 -- 语法篇
  • Neo4j图数据库和GDS图算法应用
  • 3.7、@ResponseBody 和 @RestController
  • Angular2开发踩坑系列-生产环境编译
  • go语言学习初探（一）
  • Java反射-动态类加载和重新加载
  • JS字符串转数字方法总结
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • Phpstorm怎样批量删除空行？
  • scala基础语法(二)
  • 闭包--闭包作用之保存(一)
  • 程序员最讨厌的9句话，你可有补充？
  • 猴子数据域名防封接口降低小说被封的风险
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 那些年我们用过的显示性能指标
  • 小程序上传图片到七牛云（支持多张上传，预览，删除）
  • 硬币翻转问题，区间操作
  • Spring第一个helloWorld
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • #define用法
  • #我与Java虚拟机的故事#连载10： 如何在阿里、腾讯、百度、及字节跳动等公司面试中脱颖而出...
  • (Matlab)基于蝙蝠算法实现电力系统经济调度
  • （pytorch进阶之路）扩散概率模型
  • （SpringBoot）第二章：Spring创建和使用
  • （附源码）springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • （附源码）springboot家庭财务分析系统 毕业设计641323
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • （三）centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • （五）MySQL的备份及恢复
  • (一)认识微服务
  • (转)setTimeout 和 setInterval 的区别
  • (转)真正的中国天气api接口xml，json（求加精） ...
  • (转载)虚函数剖析
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • .NET Core使用NPOI导出复杂，美观的Excel详解
  • .NET Project Open Day(2011.11.13)
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码？获取浏览器内用户信息？...
  • .NET 简介：跨平台、开源、高性能的开发平台
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET大文件上传知识整理
  • .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验