SVG 基础知识

最新推荐文章于 2024-05-24 20:40:38 发布
最新推荐文章于 2024-05-24 20:40:38 发布
阅读量1k 收藏 27
点赞数 18
文章标签： 前端 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28342801/article/details/134769358
版权

SVG

可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式，除了IE8之前的版本外，绝大部分浏览器都支持SVG

  • width: svg宽度
  • height: svg高度
  • viewBox: viewBox属性的值是由空格和/或逗号分隔的四个数字min-x，min-y，width和height的列表，它们在用户空间中指定一个矩形，该矩形映射到已建立的视口的边界
  • version: 表示svg的版本号，1.1版本是2003年确立的W3C标准，也是最新版本
<svg width="100%" height="400" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

矩形

参数有6个

  • x: 矩形左上角x坐标
  • y: 矩形左上角y坐标
  • width: 矩形的宽度
  • height: 矩形的高度
  • rx: 对于圆角矩形在x方向的半径
  • ry: 对于圆角矩形在y方向的半径
<rect x="20" y="20" width="200" height="100" style="fill:yellow; stroke:black; stroke-width:4; opacity: 0.5;" />
<rect x="250" y="20" width="200" height="100" rx="50" ry="50" style="fill:blue; stroke:black; stroke-width:4;" />

圆形和椭圆形

圆形的参数

  • cx: 圆心的x坐标
  • cy: 圆心的y坐标
  • r: 圆心的半径

椭圆的参数与圆形类似，只是半径分为水平半径和垂直半径

  • cx: 圆心的x坐标
  • cy: 圆心的y坐标
  • rx: 椭圆的水平半径
  • ry: 椭圆的垂直半径
<circle cx="120" cy="228" r="100" style="fill:green; stroke:black; stroke-width:4px;" />
<ellipse cx="350" cy="228" rx="100" ry="60" style="fill:red; stroke:black; stroke-width:4px;" />

线段

线段的参数是起点和终点的坐标

  • x1: 起点的x坐标
  • y1: 起点的y坐标
  • x2: 终点的x坐标
  • y2: 终点的y坐标
<line x1="20" y1="400" x2="200" y2="460" style="stroke:black; stroke-width:4;" />

多边形和折线

多边形和折线的参数是一样的，都只有一个points参数，这个参数的值是一系列的点的坐标。不同之处是多边形会将重点和起点连接起来，而折线不连接。

<!--多边形-->
<polygon points="20,600,100,600,100,500,60,500" style="fill:LawnGreen; stroke:black; stroke-width:3" />
<!--折线-->
<polyline points="20,600,100,600,100,500,60,500" style=" fill: none; stroke:black; stroke-width:3;" transform="translate(200,0)" />

路径

移动类

  • M = moveto:将画笔移动到指定坐标

直线类

  • L = lineto:画直线到指定坐标
  • H = horizontal lineto:画水平直线到指定坐标
  • V = vertical lineto:换垂直直线到指定坐标
<path d="M30,100L270,300M30,100H270M30,100V300" style="stroke:black; stroke-width:3;" transform="translate(500,0)" />

曲线类

  • C = curveto:画三次贝塞尔曲线经两个指定控制点到达终点坐标
  • S = shorthand/smooth curveto: 与前一条三次贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线
  • Q = quadratic Bezier curveto: 画二次贝塞尔曲线经过一个指定控制点到达终点坐标
  • T = Shorthand/smooth quadratic Bezier curveto: 与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一个二次贝塞尔曲线
<!--三次贝塞尔曲线-->
<path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,300)" />
<!--二次别赛尔曲线-->
<path d="M30,100 Q190,20 270,100 T450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,400)" />

弧线类

  • A = elliptical arc:画椭圆曲线到指定坐标

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

    • rx: 椭圆x方向的半轴大小
    • ry: 椭圆y方向的半轴大小
    • x-axis-rotation: 椭圆的x轴与水平轴顺时针方向的夹角
    • large-arc-flag: 有两个值(1: 大角度弧线、 0: 小角度弧线)
    • sweep-flag: 有两个值(1: 顺时针至终点、 0: 逆时针至终点)
    • x: 终点x坐标
    • y: 终点y坐标

闭合类

  • Z = closepath: 绘制一条直线链接终点和起点，用来封闭图形
<path d="M30,100 a150,200 0 1,0 30,-100 Z" transform="translate(20,700)" style="fill:yellow; stroke:black; stroke-width:3;" />

文字

在svg中可以使用 标签绘制文字，其属性如下

  • x: 文字位置的x坐标
  • y: 文字位置的y坐标
  • dx: 相对于当前位置在x方向上平移的距离(值为正往右，负则往左)
  • dy: 相对于当前位置在y方向上平移的距离(值为正往下，负则往上)
<text x="500" y="600" dx="20" dy="0" rotate="30" textLength="380" style="font-size: 20px;">I love you <tspan fill="#f00" style="font-size:50px;" rotate="0"> Hehe</tspan></text>

汇总

<svg width="100%" height="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!--矩形-->
	<rect x="20" y="20" width="200" height="100" style="fill:yellow; stroke:black; stroke-width:4; opacity: 0.5;" />
	<rect x="250" y="20" width="200" height="100" rx="50" ry="50" style="fill:blue; stroke:black; stroke-width:4;" />
	
	<!--圆形和椭圆-->
	<circle cx="120" cy="228" r="100" style="fill:green; stroke:black; stroke-width:4px;" />
	<ellipse cx="350" cy="228" rx="100" ry="60" style="fill:red; stroke:black; stroke-width:4px;" />
	
	<!--线段-->
	<line x1="20" y1="400" x2="200" y2="460" style="stroke:black; stroke-width:4;" />
	
	<!--多边形和折线-->
	<polygon points="20,600,100,600,100,500,60,500" style="fill:LawnGreen; stroke:black; stroke-width:3" />
	<polyline points="20,600,100,600,100,500,60,500" style=" fill: none; stroke:black; stroke-width:3;" transform="translate(200,0)" />
	
	<!--路径-->
	<path d="M30,100L270,300M30,100H270M30,100V300" style="stroke:black; stroke-width:3;" transform="translate(500,0)" />
	<!--三次贝塞尔曲线-->
	<path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,300)" />
	<!--二次别赛尔曲线-->
	<path d="M30,100 Q190,20 270,100 T450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,400)" />
	<!--绘制弧线-->
	<path d="M30,100 a150,200 0 1,0 30,-100 Z" transform="translate(20,700)" style="fill:yellow; stroke:black; stroke-width:3;" />
	
	<!--文字-->
	<text x="500" y="600" dx="20" dy="0" rotate="30" textLength="380" style="font-size: 20px;">I love you <tspan fill="#f00" style="font-size:50px;" rotate="0"> Hehe</tspan></text>
</svg>

标记、滤镜、渐变

都是写在<defs></defs>中

<svg width="100%" height="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<marker id="arrow" markerUnits="strokeWidth" makerWidth="12" makerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
			<path d="M0,0 L12,6 L0,12 L6,6 L0,0" style="fill:#000000;" />
		</marker>
		<filter id="GaussuanBlur">
			<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
		</filter>
		<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" stop-color="#f00" />
			<stop offset="100%" stop-color="#ff0" />
		</linearGradient>
		<linearGradient id="myGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
			<stop offset="0%" stop-color="#f00" />
			<stop offset="100%" stop-color="#ff0" />
		</linearGradient>
        <radialGradient id="MyGradient3">
            <stop offset="10%" stop-color="gold"/>
            <stop offset="95%" stop-color="green"/>
        </radialGradient>
	</defs>
	<line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="10" marker-end="url(#arrow)" />

	<path d="M20,70 Q40,50 80,100 T160,80 T200,90 T300,150" fill="none" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" transform="translate(0,100)" />
	<rect x="100" y="100" width="150" height="100" fill="blue" filter="url(#GaussuanBlur)" transform="translate(20,300)" />
	
	<rect x="100" y="220" width="150" height="100" fill="url(#myGradient)" transform="translate(20,300)" />
	<rect x="100" y="220" width="150" height="100" fill="url(#myGradient2)" transform="translate(20,440)" />
	<circle r="100" cx="250" cy="250" fill="url(#MyGradient3)" transform="translate(20,700)" />
	
</svg>
门路阳
关注
  • 18
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5+svg学习指南之SVG基础知识
09-28
本文主要介绍了SVG的基础概念等知识，以及SVG与CANVAS的区别，最后给出了一个简单示例，方便大家更好的了解SVG可缩放矢量图形。推荐给大家。
svg 属性详解：填充与边框
笔记
01-27 2643
填充与边框属性详解
svg的viewBox、width和height的设置说明
大剑师兰特的GIS世界
05-26 3325
其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。当wheight的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。
前端基础入门三大核心之HTML篇 —— SVG的viewBox、width和height：绘制矢量图的魔法比例尺【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-24 1276
SVG的viewBox、width和height，这三位魔法师联手，为我们的网页施加了适应性强、清晰度高的视觉魔法。掌握了它们的秘诀，无论是响应式设计还是高清大屏展示，都将游刃有余。在你的项目中，是否遇到过SVG缩放的有趣挑战？或是有独到的使用技巧？欢迎在评论区分享你的故事，让我们一起探索SVG的无限可能，让魔法更加绚烂多彩！欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
09——svg中path的使用
weixin_42289080的博客
05-16 3082
path的简单使用
SVG画布宽高
qq_32436781的博客
11-05 3064
viewport 表示SVG可见区域的大小。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。 <svg width="500" height="300"></svg> 以上代码定义了一个视区，宽500单位，高300单位； 在SVG中，可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素为单位。也就是说上面的例子中，viewport的宽度为500px，高度为300px。 单位 含义
SVG的viewBox、width和height释义, 示例及代码
大赚万万亿
12-21 349
其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。当wheight的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。
SVG--xml标签语法总结
贝勒里恩的博客
04-29 1951
1、<svg>标签 功能：顶层标签，svg代码都放在<svg>之中 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> ... </svg> 2、<circle>标签 功能：该标签代表圆形，cx、cy是圆心，r是半价 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/s
【SVG】svg入门
qq_45801837的博客
11-22 2886
svg图和其他png图的区别： svg图片上的每一个小的组成元素都是一个标签，由一个大的svg标签包裹作为一个整体 普通的png图片，就是作为一个整体，只能修改宽高大小等样式，不能修改细节 一、标签属性 1、SVG：可缩放矢量图（Scalable Vector Graphics） 2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入 3、svg标签属性 1、width、height：如果不指定这两个属性，默认是宽：300px，高：150px 2、viewBox(左上
java基础知识图谱.svg
08-22
java基础思维导图
《前端基础知识大全》-完整版
12-07
《前端基础知识大全》完整版涵盖了前端开发中的关键概念和技术，包括HTML、CSS、JavaScript、jQuery、移动端开发以及Vue框架的基础知识。以下是对这些知识点的详细解释： 1. HTML：HTML是超文本标记语言，用于创建...
网络基础知识与因特网1.svg
03-15
网络基础知识与因特网1.svg
设置 svg 宽高的正确姿势 —— viewBox
热门推荐
Lyrelion的博客
12-18 1万+
设置 svg 宽高的正确姿势 —— viewBox
SVG基本使用（二 常用属性、绘制路径/文本/超链接/图片、结构标签）
Cao_Mary的博客
09-01 2616
一、SVG常用属性 1.fill: 修改填充颜色 2.fill-opacity: 0~1 设置填充颜色的透明度 3.stroke: 修改描边颜色 4.stroke-width: 修改描边宽度 5.stroke-opacity: 0~1 设置描边透明度 6.stroke-linecap: butt(两边都没有)/square（两边为方块）/round （两边为圆形）设置线段两端帽子 7.strok...
svg学习笔记整理（超详细-非原创）
weixin_57182748的博客
06-29 300
代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小。代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小。这里就是不使用viewBox的原始大小，就是矩形图的原始大小，原始位置。
如何不是用 width 和 height 控制 svg 的渲染大小？
湖北太米网络科技有限公司
12-09 470
除了使用width和height属性控制SVG的渲染大小外，还可以使用以下方法：使用CSS样式：可以通过设置CSS的width和height属性来控制SVG的渲染大小。例如，设置SVG元素的样式为width: 100px; height: 100px;。使用viewBox属性：viewBox属性定义了SVG的可视区域，在该...
SVG 入门基础（1）属性
明天也要努力的博客
08-02 3280
1. 简介 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。 SVG 是万维网联盟的标准。 SVG 参考文档 特点： （1）SVG 图像可通过文本编辑器来创建和修改； （2）SVG 图像可被搜索、索引、脚本化或压缩； （3）SVG 是可伸缩的； （4）SVG 图像可在任何的分辨率下被高质量地打印； （5）SVG 可在图像质量不下降的情况下被放大； 1.1 使
CSS 修改SVG颜色并且宽高自适应
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
02-21 5104
需求 下图中的图案和文字根据网站的主题色更新 缩放屏幕大小时，图片可以根据屏幕大小自适应 默认图片的 svg 代码 <svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon"> <rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#ff
如何缩放SVG
CSS 初学者指南
06-26 1万+
以下是Amelia Bellamy-Royds的来宾帖子。 作为SVG Essentials的合著者和即将出版的《 将SVG与CSS3和HTML5结合使用》的作者，Amelia在SVG方面拥有丰富的经验。 我和Amelia都将在即将到来的RWD峰会上就SVG发表演讲！ 在这里，她分享了扩展SVG的史诗指南，涵盖了您可能要执行的所有方法。 它几乎不像缩放栅格图形那样简单，但是那样很好，因为它带来...
svg图标更改字体大小
06-02
要更改SVG图标的字体大小，你需要编辑SVG文件中的相关文本元素。在SVG文件中，文本元素通常使用`<text>`或`<tspan>`标记来表示。你可以使用CSS的`font-size`属性来更改文本元素的字体大小。例如，如果你想将文本元素的字体大小设置为16像素，你可以在CSS中添加以下样式： ``` text { font-size: 16px; } ``` 如果你只想更改特定文本元素的字体大小，可以为该元素添加一个唯一的ID或类，并在CSS中使用该ID或类来指定样式。例如，如果你要更改ID为"my-text"的文本元素的字体大小，你可以在CSS中添加以下样式： ``` #my-text { font-size: 16px; } ``` 请注意，编辑SVG文件可能需要一些基本的SVG知识。如果你不熟悉SVG语法和结构，建议先学习一些基础知识。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值