html-svg基础-1.1

最新推荐文章于 2024-05-10 12:42:21 发布
最新推荐文章于 2024-05-10 12:42:21 发布
阅读量316 收藏
点赞数
分类专栏： 前端技术 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caishu1995/article/details/80271417
版权

    使用 XML 来描述二维图形和绘图程序的语言

    SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失

 

SVG使用方法：

///外部文件  svg文件内部的结构如下

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 具体内容 -->
</svg>

引用svg的部分可以是以下几个地方

<embed src="circle1.svg" type="image/svg+xml" />

<object data="circle1.svg" type="image/svg+xml"></object>

<iframe src="circle1.svg"></iframe>

<a href="circle1.svg">View SVG file</a> 

 

///直接引用

    <svg></svg>直接嵌入

相关样式知识

fill:blue;             //填充颜色
fill-opacity:0.1;      //填充透明度

stroke:pink;           //边框颜色
stroke-width:5;        //边框宽度
stroke-opacity:0.9;    //边框

stroke属性

跟css的差不多，设置线、文本或元素轮廓

stroke           颜色

stroke-dasharray 创建虚线 none | 数组（5,5） | inherit

stroke-dashoffset 虚线开始的位置

stroke-width     宽度

stroke-linecap   开放路径的终结 

butt | round | square | inherit

标签

-----------------------------------------------------------------
-----------------------------------------------------------------

1、矩形<rect>

2、圆形<circle>

3、椭圆<ellipse>

4、直线<line>

5、多边形<polygon>

6、折线<polyline>

7、路径<path>

8、文本<text>

9、<defs>

10、<filter>

11、线性渐变<linearGradient>

12、放射性渐变<radialGradient>

-----------------------------------------------------------------
-----------------------------------------------------------------

 

1、矩形<rect>

<!--  x y: 左上角坐标
    rx ry: 使矩形产生圆角   -->
<!--     stroke:边框的颜色 
   fill-opacity:填充颜色透明度 
 stroke-opacity:笔触颜色透明度  -->

<rect x="50" y="20" width="150" height="150" rx="20" ry="20"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>

2、圆形<circle>

 

<!--  r:半径
  cx cy:圆心坐标  -->

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

3、椭圆<ellipse>

 

<!-- cx cy:椭圆中心坐标
     rx ry:半径  -->

<ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>

4、直线<line>

<!-- x1 y1:起始点坐标
     x2 y2:终点坐标  -->
<line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>

5、多边形<polygon>

 

<!-- 可以形成五角星  -->
<!-- fill-rule:指定算法,判断某区域是否属于"内部" nonzero | evenodd | inherit  -->
<polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

6、折线<polyline>

 

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

7、路径<path>

  • M = moveto 移动到 （坐标）
  • L = lineto 画线到 （坐标）
  • H = horizontal lineto 水平线到 （距离）
  • V = vertical lineto   垂直线到 （距离）
  • C = curveto  三次贝塞尔曲线到 （坐标 p1 p2 p3）
  • S = smooth curveto 光滑三次贝塞尔曲线到 （坐标 p2 p3）
    【当一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），可以使用S命令。简写的贝塞尔曲线命令】
  • Q = quadratic Belzier curve 二次贝塞尔曲线到 （坐标 p1 p2）
  • T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线到 （坐标 p2）
  • A = elliptical Arc 椭圆弧 
    （rx,ry  xRotation  isLarge,sweep endX,endY）
    【rx：水平方向上的半径；ry：垂直方向上的半径。
      xRotation：设置弧线X轴方向上的旋转,通常不需要，默认值0。
     isLarge   ：从A点到B点绘制一条弧线，可以得到一大一小的弧线。0 1。isLarge==1?大:小。
     sweep     ：0 1。sweep==1?顺时针:逆时针绘制弧线】
  • Z = closepath 关闭路径 （）

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<path d="M250 150 L150 350 L350 350 Z" />

8、文本<text>

 

<!-- 如果需要路径，则加defs，否则直接<text>aa</text>即可 -->
<defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<!-- x y:坐标-->
<text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
<!-- 每个<tspan> 元素可以包含不同的格式和位置 -->
<text x="10" y="20" style="fill:red;">Several lines:
    <!-- 注：xy为绝对位置 -->
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
</text>

9、<defs>

    SVG滤镜定义在<defs>元素中。

10、<filter>

用来定义SVG滤镜。使用必需的id来定义向图形应用哪个滤镜

<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)" />

11、线性渐变<linearGradient>

12、放射性渐变<radialGradient>

 

 

参考： https://segmentfault.com/a/1190000005053782 svg之<path>详解

    http://www.runoob.com/svg/svg-tutorial.html svg教程 

    http://www.w3school.com.cn/svg/index.asp    svg教程

 

彩舒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5基础教程PDF版
07-22
本课程是基于尚硅谷李立超老师的Web前端零基础入门HTML5+CSS3基础教程，旨在帮助初学者掌握HTML5的基本概念和语法。 首先，HTML（HyperText Markup Language）是一种标记语言，用于构建和呈现网页内容。HTML5作为...
HTML5-技术在移动互联网中的运用解析论文.doc
12-21
HTML5技术是移动互联网发展的重要推动力之一，它在21世纪初被提出，是对HTML4.01和XHTML1.1标准的升级。HTML5不仅增强了语法特性，支持了SVG内容，还引入了离线存储、地理定位、设备方向感应、多媒体播放和Web通信等...
(SVG Version 1.1) 的 SVG 元素列表
aitiao7316的博客
12-03 512
来自 W3C 推荐标准 (SVG Version 1.1) 的 SVG 元素 SVG 元素 元素列中的链接指向了具体元素的相关属性和更多有用的信息。 元素 描述 a 定义超链接 altGlyph 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字） altGlyphDef 定义一系列象性符号的替换（...
W3C推进SVG规范Ver1.1（中文译稿）—Part I
diyuan365760的专栏
06-21 299
转自：http://www.gispark.com/html/GISarticle/2006/1215/826.html ScalableVectorGraphics(SVG)1.1Specification1简介内容来自dedecms ScalableVectorGraphics(SVG)1.1SpecificationW3CRecommendati...
从未如此清晰：了解SVG格式的终极解读！
sky768872的博客
04-24 1624
图像质量对页面非常重要——扭曲和缩放变形的标志、图标或照片会使页面看起来粗糙和不协调，这个问题只会因为响应设计而复杂。访问者通过桌面机和智能手机查看应用程序，因此无论使用什么设备，图像都应该进行优化。如果有一个数字格式可以让图像看起来很棒，不管大小如何，它不是很好吗？事实证明，SVG格式文件非常适合应用程序的非摄影图像。本文简单地解释了这个神奇的图像格式！
SVG学习-1
mjzhang1993的博客
03-10 314
SVG 学习笔记 - 11.简介 SVG 是 使用XML描述的矢量文件 ,使用 http://www.w3.org/2000/svg 这个链接来标识文件是 SVG 的命名空间，这个链接是一个标志而已，用来告诉打开文件的软件：这个文件是 SVG 文件，而不是把它当成 XML 文 件打开。 兼容性IE 9+ Chrome 33.0+ Firefox 28.0+ Safari 7.0
SVG简介1
weixin_44540155的博客
05-07 1250
文献种类：专题技术文献； SVG简介1 开发工具与关键技术：VS/JavaScript 撰写时间：2019年5月8日 SVG简介 SVG指可伸缩矢量图形 (Scalable Vector Graphics)； SVG是使用 XML 来描述二维图形和绘图程序的语言、是可伸缩的、是万维网联盟的标准、是开放的标准。 SVG与 JPEG 和 GIF 图像比起来，...
精图规范1.0----可缩放矢量图形(SVG)规范1.0
老顽童的技术足迹
06-08 1347
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> Scalable Vector Graphics (SVG) 1.0 Specification
云修车主YY-A-v1.1-IM版本A-视觉稿.zip
09-10
《云修车主YY-A-v1.1-IM版本A-视觉稿.zip》是一个包含云修车主应用界面设计的压缩包，主要用于展示应用的视觉效果和交互设计。此压缩包主要由以下几个部分组成： 1. **index.html**：这是网页的主入口文件，通常...
引导页面(FLASH+asp) v1.1-ASP源码.zip
01-19
【引导页面(FLASH+asp) v1.1-ASP源码.zip】是一个包含ASP源代码的压缩包，主要用于创建一个带有动态效果的引导页面。在Web开发领域，引导页面通常是网站的第一个展示页面，用于吸引用户注意力，提升用户体验，或者...
SVG基础(初入门的事情)
11-22
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <rect width="100" height="100" fill="#f06"></rect> </svg> ``` SVG.js还...
SVG详细解释
热门推荐
m0_68169119的博客
07-16 1万+
svg的运用和解释
SVG简介
LikY03321的博客
12-20 5770
SVG 指可伸缩矢量图形（Scalable Vector Graphics）；SVG 用于定义用于网络的基于矢量的图形；SVG 使用 XML 格式定义图形；SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；SVG 是万维网联盟的标准。
svg教程-初识svg
DWX_top的博客
05-30 3271
/在不给 <svg> 设置宽高时，它的默认宽度是 300px ，默认高度是 150px。其实点集完全不需要用逗号隔开，上面的例子中我使用了逗号隔开，完全是为了让自己阅读代码时比价易懂。通过开始点和结束点裁切，可以得到4条弧线，也就是说2个点可以确定2个相同旋转角度的椭圆的位置，可以切出4条弧线。元素上，就会关闭反锯齿功能，突显看起来就会清晰很对，但在某些情况关闭了该功能会让图像看起来有点毛躁的感觉。可以在html中直接使用svg，< svg>< /svg>标签，不需要像canvas在js中操作。
SVG标准解读-几何图形-图案填充-核心要点
插件开发
04-14 3916
文章目录1.SVG概述2.svg标签2.1.视图(viewport)和单位2.2.坐标系统2.3.viewBox3.g标签4.公共属性5.几何图形5.1 绘制直线5.2 绘制矩形5.3 绘制椭圆5.4 绘制圆5.5 多边形5.6 折线5.7 路径5.7.1 M指令和L指令5.7.2 H指令和V指令5.7.3 Q指令5.7.4 C指令5.7.5 T指令5.7.6 S指令5.7.7 A指令 1.SVG概述 SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢
svg教程-初始svg
DWX_top的博客
05-31 1891
CanvasXML我在 知乎 上找了一个图对说明一下。左边是位图，右边是矢量图那么SVG是什么呢？它是矢量图的其中一种格式。XML。对于初学SVG的前端来说，可以简单的理解为SVG。所以可以使用CSS来设置样式，也可以使用JS对SVG进行操作。基本使用：​ 可以在html中直接使用svg，< svg>< /svg>标签，不需要像canvas在js中操作。</
【数据可视化】SVG（一）
DomCode
07-05 1714
SVG- 可缩放矢量图形免费编辑修改义项名 所属类别 : 图形 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。
良哥汇总：WEB基于SVG图形绘制——手把手教你完成矢量示意图绘制
最新发布
hualinger的博客
05-10 1198
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。 SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。 SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。SVG 的主要特点 矢量图形：SVG 使用基于路径的矢量图形，这意味着图形可以无限放大而不失真。 可伸缩性：S
SVG是什么
lin123_00的博客
05-21 1万+
SVG是什么？SVG有什么用？为什么要使用SVG？本篇文章就给大家介绍一下SVG的相关知识，让大家了解使用SVG的好处，下面我们来看具体内容。 需要面试题点击下面链接查看，有很多： 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） SVG是什么？有什么用？ SVG是一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作。 SVG最能够响应当前Web开发对可伸缩性，
安装vite-plugin-svg-icons
12-05
安装vite-plugin-svg-icons的步骤如下： 1. 确保你的节点版本大于等于12.0.0。2. 在你的项目中使用纱线或npm安装vite-plugin-svg-icons，命令如下： ``` yarn add vite-plugin-svg-icons -D ``` 或者 ``` npm i vite-plugin-svg-icons -D ``` 3. 在vite.config.ts中配置插件，代码如下： ```typescript import viteSvgIcons from 'vite-plugin-svg-icons'; import path from 'path'; export default { plugins: [ viteSvgIcons({ // 指定需要缓存的图标文件夹路径，可以是绝对路径或相对路径 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定symbolId格式 symbolId: 'icon-[dir]-[name]', }), ], }; ``` 这样就可以使用vite-plugin-svg-icons来使用iconfont等svg图标库了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值