svg入门笔记

最新推荐文章于 2022-08-25 17:09:35 发布
最新推荐文章于 2022-08-25 17:09:35 发布
阅读量130 收藏
点赞数
分类专栏： Javascript 可视化工具 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jdrunk/article/details/110823748
版权

svg笔记

svg可缩放矢量图形
位图：由像素点组合成图像 canvas
矢量图：以数学向量方式记录图像，内容以线条和色块为主. svg

svg是基于xml的技术
文件后缀.svg
<svg></svg>是最外层的根结点
xmlns定义svg命名空间

<?xml version="1.0" standalone="no"?>
<!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">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

如何引入外部的svg文件

svg文件

<?xml version="1.0" standalone="no"?>

<!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">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red" />

</svg>

html文件

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
<style>
.style{
width: 300px;

height: 100px;

background-image: url('./1svg.svg');

}
</style>
</head>
<body>
<!-- 方法一 -->
<img src="./1svg.svg" alt="">

<!-- 方法二 -->
<div class="style"></div>

<!-- 方法三 -->
<iframe src="./1svg.svg"></iframe>

</body>
</html>

在这里插入图片描述

在html中直接使用svg

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<body>

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

</div>
</body>
</html>

在这里插入图片描述

svg中基本属性有哪些
stroke-width  边框宽度
stroke 边框颜色
fill  填充的颜色 
rx ry 相当于border-radius
Stroke-opacity 透明度

矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

圆

<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>

椭圆

<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>

直线

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

多边形

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/></svg>

曲线

<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>

路径

M = moveto. 移动到的点的x轴和y轴的坐标
L = lineto. 需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
H = horizontal lineto. 绘制平行线 一个参数 水平线终点x坐标
V = vertical lineto 绘制垂直线 一个参数 垂直线终点y坐标
C = curveto 参数有两个控制点 （x1,y1）(x2,y2) 和 （x,y）代表曲线的终点
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath  闭合路径 从当前点画一条直线到路径的起点
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
相对命令使用的是小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离

直线

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

曲线

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

Svg中的标签

标签
整体平移 cx=“200px” cy=“200px” 在g标签中不起作用，因为不是所有图形都有这两个属性 ,可用transform="translate(200,200)"代替 

<div class="demo">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">

<!--整体平移 cx="200px" cy="200px" 在g标签中不起作用，因为不是所有图形都有这两个属性 ,可用transform="translate(200,200)"代替-->
<g stroke-width="2" stroke="black" transform="translate(100,100)">

<circle cx="100" cy="50" r="40" fill="transparent"/>

<circle cx="100" cy="50" r="45" fill="transparent"/>

<circle cx="100" cy="50" r="50" fill="transparent"/>
</g>
</svg>
</div>



<text>标签

<div class="demo">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">

<g style="cursor:pointer">

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

<!-- text-anchor="middle" 文本居中 start 巨左 end居右-->
<text x='80' y='50' font-size='16px' text-anchor="middle">科鲁兹</text>

</g>
</svg>
</div>

在这里插入图片描述

标签

<div class="demo">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">

<g style="cursor:pointer">

<image x='0' y='0' width="300" height="300" xlink:href="a.jpg"></image>

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

<!-- text-anchor="middle" 文本居中 start 巨左 end居右-->
<text x='80' y='50' font-size='16px' text-anchor="middle">科鲁兹</text>

</g>
</svg>
</div>

在这里插入图片描述
标签

<div class="demo">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">

<g style="cursor:pointer">

<image x='0' y='0' width="300" height="300" xlink:href="a.jpg"></image>

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

<!-- text-anchor="middle" 文本居中 start 巨左 end居右-->
<text x='80' y='50' font-size='16px' text-anchor="middle">科鲁兹</text>

</g>
</svg>
</div>

在这里插入图片描述
标签
被引用元素的容器 

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>
<g id="ShapeGroup">

<rect x="50" y="50" width="100" height="100" fill="#69C" stroke="red" stroke-width="2"/>

<circle cx="100" cy="100" r="40" stroke="#00f" fill="none" stroke-width="5"/>

</g>
</defs>
<use xlink:href="#ShapeGroup" transform="translate(-10,0) scale(0.5)"/>

<use xlink:href="#ShapeGroup" transform="translate(10,10) scale(1)"/>

<use xlink:href="#ShapeGroup" transform="translate(50,60) scale(1.5)"/>

</svg>

在这里插入图片描述

标签
x,y属性相当于 标签中的dx和dy
支持transfrom属性 

<use x = "100" y = "60" xlink:href = "#s1"/>

标签与类似

嵌入在 或元素中的图形是不会被直接显示的，除非你使用 元素来引用它。

在svg中使用动画

重复在5秒内淡化矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

用javascript动态创建svg

createElementNS() 创建命名空间

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width;initial-scale=1"> 
<script>
    function onLoad(){
        var mysvg = document.getElementById("svg_my");
        var rectObj = document.createElementNS("http://www.w3.org/2000/svg","rect");
        if(rectObj){
            rectObj.setAttribute("width",100);
            rectObj.setAttribute("height",100);
            rectObj.setAttribute("style","fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)");
            mysvg.appendChild(rectObj);
            alert("hello");
        }
    }
    window.onload = onLoad;
</script>
</head>
 
<body>
    <svg id="svg_my" style="border:1px solid #000;width:200px;height:200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
    </svg>
</body>
</html>
drunk喵咪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG文档语法结构
calm_agan的专栏
04-25 1万+
<br />SVG 语法结构说明<br />文档说明<br />版本<br />日期<br />作者<br />说明<br />1.0<br />2006.1.29<br />很少想起你<br />第 1 页 共 23 页<br />SVG 语法结构说明<br />SVG语法结构<br />一、SVG文档结构格式（为了方便说明，在文中加入标号和冒号；为了方便阅读，加了超链接）：<br />1: <?xml version=“1.0” encoding=“UTF-8” standalone=“no”?><br
svg stroke按钮路径动画效果
Jinmy的博客
07-21 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>An.
svg 使用path实现圆角效果
kaqiinono的技术小窝
08-25 3058
svg 使用path实现圆角效果
svg学习笔记
S_B_Girl的博客
12-28 372
<?xml version="1.0" standalone="no"?> <!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"> <circle cx="100" cy="50" r="40" stroke="b
svg 基本配置和使用
weixin_43294560的博客
03-21 1951
svg文件在浏览器打开就可查看 在html中使用 第一种 将svg文件按照src来引入使用 如<img src='xx/xx.svg' /> 第二种 在html页面使用svg标签(块级标签) <svg xmlns="http://www.w3.org/2000/svg"> ... &l...
svg入门pdf文档
10-18
web开发svg图形开发入门与精通,svg实例参考文档
SVG入门资料
12-25
SVG入门资料，可以参考资料代码进行学习！
SVG经典入门
04-25
SVG经典入门完整版 SVG （可缩放矢量图形） 可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
用于vue引入SVG入门的学习材料
03-07
帮助更多人了解SVG vuer引入方式
SVG精髓-笔记和教程
03-07
SVG精髓-笔记和教程
SVG 标签
guoqkmiss的博客
09-27 5353
一、rect 矩形 属性 rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性 CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的 stroke-width 属性定义矩形边框的宽度 CSS 的 stroke 属性定义矩形边框的颜色 x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0p
SVG基础二：SVG编写
林谿的博客
12-22 1148
SVG 使用 XML 编写。 SVG 实例 下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存： <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" h
按下透明度变化控件实现，svg集成，周结
weixin_34212189的博客
01-13 198
按钮按下透明度变化 因为工作的关系，常常面临需要设计点击某个控件具有按下透明度变化的需求。 例如： 制\点击透明度变化.gif) 可能图片有点模糊，但是大概就是在点击的时候，有明显按下的感觉，现在的处理方案有： 叫设计师多做一张图片，然后将两张图片做成同一个drawable来处理，例如这样 <selector xmlns:android="http://schemas.android.c...
svg笔记总结
w_xiaolin的博客
02-12 315
一、什么是svg？ svg是一种图像格式（矢量图，就是英文缩小） svg的优势 1、代码可见，文本编辑器打开即可编辑 2、使用xml格式，可嵌入网页 3、图像大小小 4、可以与js交互 二、如何创建 1、文本创建 就想他的优势一样可直接编写 在程序中便可以直接调用 效果图 2、嵌入创建 书写方式和单独拿出来书写方式一样，但应用方式是通过id，不过这个id有点不稳定 效果图 可以看见我们的...
SVG文档：SVG编程经典教程(转)
aitiao7316的博客
12-07 287
我应该学习这个教程吗？第 1 页（共3 页） 本教程辅助开发人员理解可伸缩向量图形（SVG）背后的概念以将它们作为静态文档或动态生成的内容创建。 XML 经验不是必需的，但熟悉至少一种标记语言（如 HTML）是有用的。有关基本的 XML 信息，请参阅教程 Introduction to XML 。在本教程的结束部分的单个脚本编制示例中用到了 JavaScript，不过相当简...
HTML5的SVG绘图笔记5：渐变与透明度
YanHSama的博客
02-03 2711
渐变 透明度
SVG的渐变效果、模糊效果
u012183426的博客
08-13 1218
  &lt;h1&gt;绘制文本:svg画布上不允许使用普通的HTML元素，eg:span,div.需要用svg自己的text&lt;/h1&gt; &lt;svg id="s14" width="500" height="400"&gt; &lt;text font-size="50" alignment-baseline="
移动端h5页面预览word文档
jdrunk的博客
04-08 7559
在web端预览word文档，可以使用iframe来实现。但由于兼容性问题，并不能使用iframe在安卓和ios上预览文件 经测试发现，mammoth插件可以实现该功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
onscroll 事件和onScrollCapture事件
jdrunk的博客
11-24 6611
onscroll 事件在元素滚动条在滚动时触发。 HTML 中: <element onscroll="myScript"> JavaScript 中: object.onscroll=function(){myScript}; JavaScript 中, 使用 addEventListener() 方法: object.addEventListener("scroll", myScript); <!DOCTYPE html> <html> <head>
svg polyline
最新发布
12-23
以下是两个关于SVG polyline的例子： 1. 创建一个只包含直线的形状： ```xml <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/> </svg> ``` 2. 创建一个四边形： ```xml <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc; stroke:#000000;stroke-width:1"/> </svg> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值