50兆 svg 文件超过_SVG：可伸缩的矢量图形

最新推荐文章于 2024-03-15 13:46:02 发布

聂述龙

最新推荐文章于 2024-03-15 13:46:02 发布

阅读量175

点赞数

文章标签： 50兆 svg 文件超过

本文链接：https://blog.csdn.net/weixin_30539081/article/details/112421348

版权

来源 | https://www.kancloud.cn/dennis/tgjavascript/241853 这里只是简要的介绍一下SVG，如要深入，推荐看《SVG经典入门》 1、SVG 1.1 概述 SVG是一种用于描述图形的XML语法。由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。一个简单的SVG文件如下：

<svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">  <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>svg>

1.2 使用方法要使用SVG有很多方法，最简单的就是直接将SVG代码嵌入到HTML中：

<body>  <svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">     <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>     svg>body>

SVG代码也可以单独写在一个文件中，后缀是“.svg”，然后用在 、、、 等标签，以及CSS的background-image属性，将这个文件插入网页。

<img src="example.svg"><object data="example.svg" type="image/svg+xml">object><embed src="example.svg" type="image/svg+xml"><iframe src="example.svg">iframe>

1.3 基本图形 (1)矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <rect x="10" y="20" rx="5" ry="5"  width="200" height="100"  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;opacity:0.5" />svg>

属性说明：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性

fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
fill-opacity属性定义填充颜色的透明度
stroke-width 属性定义矩形边框的宽度
stroke 属性定义矩形边框的颜色
stroke-opacity属性定义笔触颜色的透明度
opacity属性定义元素的透明度
rx和ry属性定义矩形圆角

下面的其他图形都支持style属性，而且可以单独作为属性添加。 (2)圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <circle cx="100" cy="50" r="40" stroke="black"  stroke-width="2" fill="red"/>svg>

属性说明：

cx和cy属性定义圆点的x和y坐标，如果省略，则默认为(0,0)
r属性定义圆的半径

(3)椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <ellipse cx="300" cy="80" rx="100" ry="50"  style="fill:yellow;stroke:purple;stroke-width:2"/>svg>

属性说明：

cx和cy属性定义椭圆的中心的x和y坐标
rx定义水平半径
ry定义垂直半径

(4)直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <line x1="0" y1="0" x2="200" y2="200"  style="stroke:rgb(255,0,0);stroke-width:2"/>svg>

属性说明：

x1和y1表示起始点的x和y坐标
x2和y2表示结束点的x和y坐标

(5)多边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polygon points="200,10 250,190 160,210"  style="fill:lime;stroke:purple;stroke-width:1"/>svg>

属性说明：

points属性定义多边形每个角的x和y坐标，x和y坐标之间用逗号隔开，每个坐标点之间用空格隔开

(6)曲线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"  style="fill:none;stroke:black;stroke-width:3" />svg>

points属性定义多边形每个角的x和y坐标，x和y坐标之间用逗号隔开，每个坐标点之间用空格隔开

(7)文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <text x="0" y="15" fill="red">I love SVGtext>svg>

(8)路径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <path d="M150 0 L75 200 L225 200 Z" />svg>

属性说明：

d属性定义一组路径数据，一对坐标值的x和y坐标之间可以用空格或逗号隔开，但坐标对与坐标对之间只能用空格分隔。
pathLength属性定义路径总长度，不允许负值

绘图指令：

M   moveto，表示移动，后跟着坐标点，比如150 0L   lineto，表示连接(也可以说是绘制直线)，后跟着坐标点，比如75 200H  horizontal lineto，绘制水平线段V vertical lineto，绘制垂直线段C curveto，绘制普通的三次贝塞尔曲线(C x1 y1 x2 y2 destx desty)S smooth curveto：绘制光滑的三次贝塞尔曲线(S x2 y2 destx desty)Q quadratic Bézier curve：绘制普通的二次贝塞尔曲线T smooth quadratic Bézier curveto：绘制光滑的二次贝塞尔曲线A elliptical Arc：绘制椭圆弧Z  closepath，表示完成闭合路径，即将路径首尾相连，构成闭合图形

大写表示绝对定位，小写表示相对定位。 1.4 装饰SVG 1.4.1 stroke属性

stroke：定义一条线，文本或元素轮廓颜色
stroke-width：定义了一条线，文本或元素轮廓厚度
stroke-linecap：定义不同类型的开放路径的终结(可能值：butt、round、square)
stroke-dasharray：用于创建虚线

1.4.2 滤镜 (1)模糊效果所有的SVG滤镜都定义在元素中，标签用来定义SVG滤镜例子：元素是用于创建模糊效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <filter id="f1" x="0" y="0">      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />    filter>  defs>  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" />svg>

(2)阴影元素是用于创建阴影效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <filter id="f1" x="0" y="0" width="200%" height="200%">      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />    filter>  defs>  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f1)" />svg>

1.4.3 渐变 (1)线性渐变元素用于定义线性渐变。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />    linearGradient>  defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />svg>

(2)放射性渐变元素用于定义放射性渐变。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">      <stop offset="0%" style="stop-color:rgb(255,255,255);      stop-opacity:0" />      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />    radialGradient>  defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />svg>

本文完~

聂述龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
50兆 svg 文件超过_SVG：可伸缩的矢量图形

来源 |https://www.kancloud.cn/dennis/tgjavascript/241853这里只是简要的介绍一下SVG，如要深入，推荐看《SVG经典入门》1、SVG1.1 概述SVG是一种用于描述图形的XML语法。由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。一个简单的SVG文件如下：<svg ...
复制链接

扫一扫