只因小黑子:SVG

news/2024/3/29 21:04:02/文章来源:https://blog.csdn.net/VanWot/article/details/129127100

小黑子的SVG复习

  • SFV画布
    • 1. 初始SVG
    • 2. SVG绘制矩形、圆形和椭圆形
      • 2.1 rect 矩形
      • 2.2 circle 圆形
      • 2.3 ellipse 椭圆
    • 4. SVG绘制线条、多边形和多线条
      • 4.1 line 线条
      • 4.2 polygon 多边形
      • 4.3 polyline 多线条
    • 5. SVG绘制文本 text
    • 6. SVG绘制路径 path
    • 7. SVG描边属性
    • 8. SVG 模糊和阴影效果
      • 8.1 图形模糊效果
      • 8.2 阴影效果
    • 9. SVG 线性渐变和径向渐变
      • 9.1 linearGradient 线性渐变
      • 9.2 radialGradient 径向渐变

SFV画布

1. 初始SVG

SVG:是XML语法的图像格式,英宓全称是Scalable Vedor Graphias

即呵缩放矢量图,是W3C的一项建

用于解决网站图标模糊问题

  • SVG则是属于对图像的形卷描述
  • 所以它本质上是文本宓件。体积较小
  • 且不管放大多少倍都不会失真

与png区别:
PNG图片是基于像素处理的,不能再VSCode里直接编辑,
而svg是用html编写出来的

SVG标签
sVG标签是SVG图形的一个容器,双标签

在这里插入图片描述
在这里插入图片描述

2. SVG绘制矩形、圆形和椭圆形

在这里插入图片描述
任何单标签,都可以在第二个尖叫号前写一个斜杠 /,表示标签闭合了。也就是用闭合标签表示单标签,更加严谨

2.1 rect 矩形

在这里插入图片描述

    <svg width="400" height="110"><rect width="300" height="100" fill="red" stroke-width="10" stroke="black" /></svg><br><svg width="400" height="180"><rect x="50" y="20" width="150" height="150" fill="blue" stroke="tomato" stroke-width="5" opacity="0.5"/></svg><br><svg width="400" height="180"><rect x="50" y="20" width="150" height="150" fill="red" stroke="black" stroke-width="5" opacity="0.5" rx="20" ry="30" /></svg>

在这里插入图片描述

2.2 circle 圆形

在这里插入图片描述

    <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>

在这里插入图片描述

2.3 ellipse 椭圆

在这里插入图片描述

    <svg width="500" height="140"><ellipse cx="200" cy="80" rx="100" ry="50" stroke="purple" stroke-width="10" fill="yellow"/></svg>

在这里插入图片描述

    <svg width="500" height="150"><ellipse cx="240" cy="100" rx="220" ry="30" stroke="purple" stroke-width="10" fill="yellow"/><ellipse cx="220" cy="70" rx="190" ry="20" stroke="purple" stroke-width="10" fill="lime"/><ellipse cx="210" cy="45" rx="170" ry="15" stroke="purple" stroke-width="10" fill="red"/></svg><br><svg width="500" height="150"><ellipse cx="240" cy="50" rx="220" ry="30" stroke="purple" stroke-width="10" fill="yellow"/><ellipse cx="220" cy="50" rx="190" ry="20" stroke="purple" stroke-width="10" fill="whitesmoke"/></svg>

在这里插入图片描述

4. SVG绘制线条、多边形和多线条

4.1 line 线条

在这里插入图片描述

    <svg width="500" height="210"><line x1="0" y1="0" x2="200" y2="200" stroke="purple" stroke-width="10" /></svg>

在这里插入图片描述

4.2 polygon 多边形

坐标之间用空格隔开,每一对坐标的x和y用逗号隔开
在这里插入图片描述

    <svg width="500" height="210"><polygon points="200,20 250,190,160,210" fill="lime" stroke="red" stroke-width="5"/></svg><br><svg width="500" height="250"><polygon points="220,20 300,210 170,250 123,234" fill="blue" stroke="red" stroke-width="5"/></svg><br><svg width="500" height="210"><polygon points="100,10 40,198 198,78 10,78 160,198" fill="skyblue" stroke="yellow" stroke-width="5"/></svg>

在这里插入图片描述

4.3 polyline 多线条

在这里插入图片描述

    <svg width="500" height="210"><polyline points="20,20 40,25 60,40 80,120 120,140 200,180" fill="none" stroke="black" stroke-width="5"/></svg><br><svg width="500" height="180"><polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="none" stroke="red" stroke-width="5"/></svg>

在这里插入图片描述

5. SVG绘制文本 text

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
添加使用锚点跳转
在这里插入图片描述

6. SVG绘制路径 path

在这里插入图片描述
在这里插入图片描述
在path中绘制贝塞尔曲线使用q命令
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <svg width="450" height="400"><path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"></path><path d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none"></path><path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none"></path><path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none"></path><g fill="black"><circle cx="100" cy="350" r="3"></circle><circle cx="250" cy="50" r="3"></circle><circle cx="400" cy="350" r="3"></circle></g><g font-size="30" fill="black" text-anchor="middle"><text x="100" y="350" dx="-30">A</text><text x="250" y="50" dx="-10">B</text><text x="400" y="350" dx="30">C</text></g></svg>

在这里插入图片描述

7. SVG描边属性

所有的描边属性都可以应用到如下
在这里插入图片描述
在这里插入图片描述

8. SVG 模糊和阴影效果

8.1 图形模糊效果

在这里插入图片描述
在这里插入图片描述
模糊效果可以通过feGaussianBlur创建,需要定义在filter标签里面
在这里插入图片描述
在这里插入图片描述

    <svg width="110" height="110"><defs><filter x="0" y="0" id="f1"><feGaussianBlur stdDeviation="15"/></filter></defs><rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect></svg>

在这里插入图片描述

8.2 阴影效果

在这里插入图片描述
在这里插入图片描述

    <svg width="140" height="140"><defs><filter x="0" y="0" width="200" height="200" id="f2"><feOffset in="SourceAlpha" dx="20" dy="20"/><feGaussianBlur stdDeviation="10"/><feBlend in="SourceGraphic"/></filter></defs><rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"></rect></svg>

在这里插入图片描述

9. SVG 线性渐变和径向渐变

9.1 linearGradient 线性渐变

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <svg width="400" height="150"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grad1"><stop offset="0%" stop-color="rgb(255,255,0)"/><stop offset="100%" stop-color="rgb(255,0,0)"/></linearGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55"  fill="url(#grad1)"></ellipse><text fill="white" font-size="45" x="150" y="86">SVG</text></svg>

在这里插入图片描述

9.2 radialGradient 径向渐变

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <svg width="500" height="150"><defs><radialGradient cx="30%" cy="30%" r="50%" fx="30%" fy="50%" id="grad2"><stop offset="0%" stop-color="rgb(255,255,0)"/><stop offset="100%" stop-color="rgb(0,0,255)"/></radialGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55"  fill="url(#grad2)"></ellipse><text fill="white" font-size="45" x="150" y="86">SVG</text></svg>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3.2中使用swiper缩略图轮播教程

介绍 在vue3 中使用 swiper 实现缩略图的轮播图效果,具体如下图所示: 使用 切换到项目终端 ,输入命令 npm install swiper --save , 进行安装在 main.js里,引入 swiper.css并使用,具体代码如下;import {createApp } from vue import App from ./App.vue import router…

查询服务器tns文件路径,oracle数据库tns配置方法详解

查询服务器tns文件路径,oracle数据库tns配置方法详解 TNS简要介绍与应用 Oracle中TNS的完整定义&#xff1a;transparence Network Substrate透明网络底层&#xff0c; 监听服务是它重要的一部分&#xff0c;不是全部&#xff0c;不要把TNS当作只是监听器。 TNS是Oracle Net…

Centos7搭建hadoop3.3.4分布式集群

文章目录1、背景2、集群规划2.1 hdfs集群规划2.2 yarn集群规划3、集群搭建步骤3.1 安装JDK3.2 修改主机名和host映射3.3 配置时间同步3.4 关闭防火墙3.5 配置ssh免密登录3.5.1 新建hadoop部署用户3.5.2 配置hadoopdeploy用户到任意一台机器都免密登录3.7 配置hadoop3.7.1 创建目…

linux shell脚本详解

一、!/bin/bash --- 指定脚本解释器 二、注释 1、单行注释 以 # 开头的行就是注释 2、多行注释 一般使用第一种&#xff01;来注释 三、变量 只读变量 使用 readonly 命令可以将变量定义为只读变量&#xff0c;只读变量的值不能被改变。 删除变量 unset variable_name…

社招中级前端笔试面试题总结

HTTP世界全览 互联网上绝大部分资源都使用 HTTP 协议传输&#xff1b;浏览器是 HTTP 协议里的请求方&#xff0c;即 User Agent&#xff1b;服务器是 HTTP 协议里的应答方&#xff0c;常用的有 Apache 和 Nginx&#xff1b;CDN 位于浏览器和服务器之间&#xff0c;主要起到缓存…

前端页面jquery规范写法

使用最新版本的 jQuery 最新版本的 jQuery 会改进性能和增加新功能,若不是为了兼容旧浏览器,建议使用最新版本的 jQuery。以下是三条常见的 jQuery 语句,版本越新,性能越好: $(.elem) $(.elem, context) context.find(.elem) 结果 1.6.2 版执行次数远超两个老版本。 jQ…

一文解决Rust字符串:String,str,String,str,CString,CStr

一、str和&str和String的区别 1.存放位置&#xff0c;可变不可变&#xff1a; str来源于Rust本身的数据类型&#xff0c;而String类型来自于标准库。首先看一下str 和 String之间的区别&#xff1a;String是一个可变的、堆上分配的UTF-8的字节缓冲区。而str是一个不可变的…

ElementUI分页的实现

官网地址&#xff1a;Element - The worlds most popular Vue UI framework 第一步&#xff1a;拷贝你喜欢的分页类型放在你的组件页面需要用到的分页位置 <el-paginationsize-change"handleSizeChange"current-change"handleCurrentChange":current-p…

记一次:request请求总结

前言&#xff1a;和前端联调的时候发现前端人员请求的方式不对&#xff0c;固做此总结问题&#xff1a;request请求方式有多少种&#xff1f;答&#xff1a;Java后端查看有8种&#xff0c;spring-web中的java枚举图如下而使用PostMan查看有15种&#xff0c;如下图GET&#xff0…

【重点掌握】Java基础之Javaweb核心技术详解

都说一入Java深似海&#xff0c;从此代码是爱人&#xff0c;但是学习的过程却从来都不轻松。当下&#xff0c;越来越多的互联网企业&#xff0c;招聘Java工程师时&#xff0c;明确写道需熟练掌握JavaWeb技术。作为衔接前后端的重要一环&#xff0c;JavaWeb技术已成为程序员向大…

火热报名 | DockQuery 1.2 beta版本体验官开启招募!

DockQuery是什么&#xff1f; DockQuery 代号「天狼」&#xff0c;是图尔兹全新自研的一款专业新型数据库桌面客户端&#xff0c;专为信创背景下国内外数据库开发/管理而设计&#xff0c;全面覆盖信创数据库目录、支持国内外操作系统。 目前&#xff0c;DockQuery 仅以社区版…

【教程】GitBook Editor编写电子书

GitBook Editor电子书编写说明1、安装软件2、创建文档3、编辑文档4、生成电子书1、安装软件 下载并安装GitBook Editor软件&#xff0c;网上资源很多&#xff0c;根据自己系统选用即可 官网参考&#xff1a;GitBook - Where technical teams document. 2、创建文档 1&#xf…

Talk | 清华大学交叉信息研究院助理教授杜韬:利用计算方法探究流固耦合

本期为TechBeat人工智能社区第474期线上Talk&#xff01; 北京时间2月15日(周三)20:00&#xff0c;清华大学交叉信息研究院助理教授——杜韬的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “利用计算方法探究流固耦合”&#xff0c;届时将介绍流固…

HTTP与HTTPS原理

目录 HTTP 协议背景 协议格式 请求行 请求报头 请求正文&#xff08;有效载荷&#xff09; 响应行 HTTPS原理 协议背景 什么是加密&#xff1f; 为什么要加密&#xff1f; 加密方式 数据摘要&#xff08;数据指纹&#xff09; 协议加密方案实现探究 方案一&#xff1a;只使用对…

【云原生】初识Kubernetes的理论基础

一、kubernetes概述 1.1 kubernetes介绍 K8S的全称为Kubernetes (K12345678S)&#xff0c;首字母与尾字母中间有8个字母&#xff0c;缩写为K8S 作用 用于自动部署、扩展和管理“容器化(containerized) 应用程序”的开源系统。可以理解成K8S是负责自动化运维管理多个容器化程序…

【云原生】k8s之Yaml文件详解

一、K8S支持的文件格式 kubernetes支持YAML和JSON文件格式管理资源对象。 JSON格式&#xff1a;主要用于api接口之间消息的传递YAML格式&#xff1a;用于配置和管理&#xff0c;YAML是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 1、yaml和json的主…

[Golang实战]github.io部署个人博客hugo[新手开箱可用][小白教程]

[Golang实战]github.io部署个人博客hugo[新手开箱可用][小白教程]1.新手教程(小白也能学会)2.开始准备2.1myBlog是hugo的项目1.安装Hugo2.创建hugo项目2.2 xxxx.github.io是github.io中规定的pages项目3.成功部署4.TODO自动化workflows部署github.io1.新手教程(小白也能学会) …

分析| 2023年移动开发平台的发展空间

春节过后返工已经过月&#xff0c;许多移动开发领域的企业都在忙着做技术调研与选型。在此之前&#xff0c;不如先回顾一下2022年的市场趋势&#xff0c;再结合好的移动开发平台的标准&#xff0c;从中窥见2023年的发展前景。 Gartner十大战略技术趋势 全球权威咨询机构Gartne…

分析称勒索攻击在非洲、中东与中国增长最快

Orange Cyberdefense&#xff08;OCD&#xff09;于 2022 年 12 月 1 日发布了最新的网络威胁年度报告。报告中指出&#xff0c;网络勒索仍然是头号威胁 &#xff0c;也逐渐泛滥到世界各地。 报告中的网络威胁指的是企业网络中的某些资产被包括勒索软件在内的攻击进行勒索&…

2022-06-16_555时基的迷人历史和先天缺陷!

https://www.eet-china.com/news/magazine220608.html 555时基的迷人历史和先天缺陷&#xff01; 发布于2022-06-16 03:39:12 LARRY STABILE 流行数十年的555时基&#xff0c;业内不知晓的工程师应该寥寥无几&#xff01;几乎所有的数字电路教材中&#xff0c;都有该芯片的身影…