javascript学习-SVG

最新推荐文章于 2024-05-14 10:55:03 发布
最新推荐文章于 2024-05-14 10:55:03 发布
阅读量2.8k 收藏 5
点赞数 4
文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43368682/article/details/107701652
版权

SVG简介

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,本质上是文本文件，体积较小，放大多少都不会失真。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

svg的引入

  • 直接放在页面中
  • 利用img标签
  • 利用iframe标签
  • 利用object标签
  • 利用embed标签

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	//直接复制放入省略
		<img src="img/mail.svg" />
		<iframe src="img/mail.svg" width="200" height="200" style="border: none;"></iframe>
	     <object data="img/mail.svg" type="image/svg+xml"></object>
		 <embed src="img/mail.svg" type="image/svg+xml"></embed>
	</body>
</html>

结果：在这里插入图片描述

svg的语法

svg的写法：

例子：

<svg width="100%" height="100%">
			<circle id="c1" cx="50" cy="50" r="50"></circle>
		</svg>

运行结果：在这里插入图片描述

  • svg的图像默认大小是300*150（像素）。
  • 如果只想展示svg图像的一部分要指定viewBox属性。
    例子：
		<svg width="100" height="100">
			<circle id="c1" cx="50" cy="50" r="50" ></circle>
		</svg>
		<hr >
		<svg width="100" height="100" viewBox="50 50 50 50">
		<!-- 前面是左上角坐标，后面是切出来的宽高 -->
			<circle id="c1" cx="50" cy="50" r="50" ></circle>
		</svg>

结果：
在这里插入图片描述

circle标签

//cx是圆心的x轴坐标，cy是圆心的y轴坐标，r是半径,相对于svg画布上的左上角原点
<circle id="c1" cx="50" cy="50" r="50" ></circle>

svg的css属性
fill：填充色
stroke:描边色
stroke-width:边框宽度
例子：

<style type="text/css">
			.red{
				fill: #FF0000;
			}
			.blue{
				fill: skyblue;
				stroke: #FF0000;
				stroke-width: 5px;
			}
</style>
<svg width="500" height="500">
	<circle id="c3" cx="50" cy="50" r="50" fill="orange" ></circle>
	<circle id="c4" cx="200" cy="50" r="50" class="red"></circle>
	<circle id="c5" cx="350" cy="70" r="50" class="blue"></circle>
</svg>

结果：
在这里插入图片描述

line标签

x1,y1是线段起始点坐标，x2,y2是线段终点坐标。
例子：

	<svg width="500" height="500">
			<line x1="50" y1="50" x2="200" y2="200" style="stroke: blueviolet;stroke-width: 5px;"></line>
		</svg>

结果：
在这里插入图片描述

polyline标签

折线标签使用格式：
point中的就是各个点坐标

  <polyline points="50,100 50,300 350,300" style="stroke: aquamarine;stroke-width: 5px; fill: none;"></polyline>

结果：
在这里插入图片描述

rect标签

格式：x,y左上角端点的横纵坐标，width和height指定宽度和高度（像素）

.rect{
				fill: aquamarine;
				stroke: #8A2BE2;
				stroke-width: 5px;
		}
<svg width="500" height="500">
			<rect x="50" y="50" width="250" height="250" class="rect"></rect>
	    </svg>

结果：
在这里插入图片描述

ellipse椭圆标签

		<style type="text/css">
			.ell{
				fill: aquamarine;
				stroke: #8A2BE2;
				stroke-width: 5px;
			}
		</style>
		<svg width="500" height="500">
		    <ellipse cx="200" cy="200" rx="100" ry="50" class="ell"></ellipse>
		</svg>

在这里插入图片描述

polygon多边形标签

points是按顺序连接的端点的坐标

		<style type="text/css">
			polygon{
				fill: aquamarine;
				stroke: #8A2BE2;
				stroke-width: 5px;
			}
		</style>
		<svg width="500" height="500">
		<polygon points="50,50 350,10 350,350 50,350 "></polygon>
		</svg>

结果：
在这里插入图片描述

path标签

绘制路径M是起点，L是中间点，Z表示闭合

   path{
				stroke: #8A2BE2;
				stroke-width: 5px;
				fill:none;
			}
		<svg width="600" height="600">
	        <path d="M 50,50 L 100,60 L 200,160 L 250,300 L 450,450 Z"></path>
		</svg>

结果：在这里插入图片描述

text标签

x,y属性表示文本区块基线起点的横坐标和纵坐标。【注意】字体颜色用fill进行填充
格式：

		<style type="text/css">
			text{
				fill: slateblue;
				font-size: 50px;
				font-weight: 600;
				stroke: #7FFFD4;
				stroke-width: 2px;
			}
		</style>
<text x="200" y="300">这是一个文本内容</text>

结果：
在这里插入图片描述

use标签

用于复制一个形状。设置的x,y是相对于被复制的形状的坐标
格式：

		<svg width="600" height="600">
			<circle id="c1" cx="50" cy="50" r="50" fill="orange" ></circle>
			<use href="#c1" x="200" y="200"></use>
	    </svg>

结果：
在这里插入图片描述

g标签

将多个形状组成一个组。

<svg width="600" height="600">
			<g id="g1">
			<circle id="c1" cx="50" cy="50" r="50" fill="skyblue" ></circle>
			<circle id="c2" cx="150" cy="50" r="50" fill="blue" ></circle>
			<circle id="c2" cx="250" cy="50" r="50" fill="black" ></circle>
			</g>
			<use href="#g1" x="0" y="200"></use>
		</svg>

结果：
在这里插入图片描述

defs标签

用于自定义形状，它内部的代码不会显示，仅仅供引用。下列例子上面的图形不会再显示。。

       <defs>
			<g id="g1">
			<circle id="c1" cx="50" cy="50" r="50" fill="skyblue" ></circle>
			<circle id="c2" cx="150" cy="50" r="50" fill="blue" ></circle>
			<circle id="c2" cx="250" cy="50" r="50" fill="black" ></circle>
			</g>
			</defs>
			<use href="#g1" x="0" y="200"></use>

pattern标签

用于自定义一个形状，该形状可以来平铺一个区域
格式：

		<svg width="500" height="500">
		<defs>
         <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
		<circle id="c1" cx="50" cy="50" r="50" fill="skyblue" ></circle>
		</pattern>
		</defs>
		
		<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
		</svg>

结果：
在这里插入图片描述

image标签

一般不进行这个操作。
格式

    <svg width="500" height="500">
		      <image xlink:href="img/image4.jpg" width="100%" height="100%" />
		</svg>

在这里插入图片描述
放大了会失真

animate标签

产生动画效果

		<svg width="600" height="600">
			<rect x="0" y="0" width="100" height="100" fill="skyblue">
				<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite"></animate>
			</rect>
		</svg>

结果：不停运动
在这里插入图片描述

animateTransform标签

例子：
from和to有三个属性值第一个是角度值，第二个和第三个是旋转中心坐标。
例子表示，开始时绕着（200,200）旋转，结束时绕着（400,400）旋转角度为360。边旋转边移动。

		<svg width="1000" height="1000">
			<rect x="100" y="100" width="100" height="100" fill="skyblue">
			 <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite"></animateTransform>
			</rect>
		</svg>

结果：
在这里插入图片描述

加油吧qaq
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
NN-SVG：可发布的NN体系结构示意图
02-03
前两个使用，而第二个使用JavaScript库。 NN-SVG提供了通过多种尺寸，颜色和布局参数根据用户喜好对图形进行样式设置的功能。 我希望该工具可以节省机器学习研究人员的时间，并且希望该软件在某些情况下也可以用作...
svg.js使用教程
IT飞牛
02-13 7544
在日常web开发过程中，我们会需要显示一些图形化的元素，使用div+css、ps图片是常见的实现方式。但使用svg来绘制可能更加合适，SVG是，有一些预定义的形状元素，可被开发者使用和操作： 矩形(rect)、 圆形(circle)、 椭圆(ellipse)、 线(line)、 折线(polyline)、 多边形(polygon)、 路径(path)。svg可以是独立的*.svg文件，可以通过来引入。也可以直接将svg代码写入html中，开发和使用起来非常灵活。本教程主要介绍svg.js。
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
icemwj的博客
07-14 2262
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
11. JS操作SVG
最新发布
一名全栈开发工程师
05-14 568
在本文中，我们将探讨如何使用JavaScript与SVG交互，实现动态的图形效果。
【SVG.js实战篇】01-Vue中优雅的使用SVG.js
Wonder_Risk的博客
07-26 8186
一、关于SVG.js SVG.js是一个基于SVG的开源JS库，支持操作 SVG 和执行 SVG 动画。真的很好用！(在实际项目场景中，使用SVG.js很便利友好) github仓库 官方文档 本文Demo源码 二、安装 // npm npm install @svgdotjs/svg.js // yarn yarn add @svgdotjs/svg.js 三、项目中引入 import { SVG } from "@svgdotjs/svg.js" 四、绘制基础图形 绘制图形之前，首先需要创
SVG入门 - javascript操作
natsu-cc的博客
03-25 2318
DOM操作 svg看起来是一个整体，但是如果svg代码直接写在HTML页面之中，它就成为页面DOM的一部分，可以直接用DOM操作。 <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> 上面代码插入网页之后，也可以用 CSS 定制样式： circle { s
save-ps-to-svg1.0.jsx 让Ps支持svg格式
03-16
标题中的“save-ps-to-svg1.0.jsx”是一个JavaScript脚本，它的主要目的是扩展Adobe Photoshop（简称Ps）的功能，使其能够支持输出SVG（Scalable Vector Graphics）格式的文件。SVG是一种基于XML的矢量图格式，适用...
snap-svg-animation
06-07
总之，“snap-svg-animation”是一个学习和实践SVG动画的好资源，特别适合前端开发者或设计师，帮助他们掌握利用JavaScript进行SVG动画制作的技能，提升网页的互动性和视觉表现力。通过深入研究提供的源代码和示例，...
swipe-menu-svg
06-22
6. **源码结构**：在`swipe-menu-svg-master`这个压缩包中，可能包含以下文件和目录： - `index.html`: 主页文件，展示项目的基本结构和功能。 - `css/`: 存放样式表，定义菜单的样式。 - `js/`: 存放JavaScript...
blendic-svg-doc
03-17
通过阅读和理解这部分代码，开发者可以深入学习如何利用JavaScript与SVG进行交互，以及`blendic-svg-doc`是如何封装和优化这些操作的。 在实际项目中，我们可以利用`blendic-svg-doc`实现以下应用场景： 1. **数据...
学习笔记——SVG.js中形状元素的创建及其相关方法
qq_41339126的博客
05-13 1096
SVG.js插件创建line、rect、circle、ellipse、polyline、polygon、path元素，并且其元素的相关方法学习。
用js动态创建svg
武林半侠的博客
12-31 4105
要实现的效果 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" width="400px" height="300px"&gt
SVG.js包的使用
热门推荐
make_progress的博客
08-29 2万+
1、SVG.js包简介 SVG.js是用于绘制矢量图和制作矢量动画的轻量级js库。 官网：https://svgjs.com/ （1）SVG.js包的开发文档 W3C关于SVG.js包的文档（英文） https://www.w3.org/TR/SVG/ SVG.js包的英文开发文档，可以在官网和W3C上看到，但是中文的开发文档我没有找到，如果感觉英文看不习惯，可以使用Google浏览器...
Js实现图片转换SVG
qq_34082921的博客
10-23 1096
【代码】Js实现图片转换SVG。
javascript-SVG
ZhouHuiCSDN
06-08 610
概述 Scalable Vector [ˈvektə®] Graphics [ˈgræfɪks] 可伸缩的矢量图形。99年由 W3C 发布，在 2013 年成为了 W3C 推荐标准。它是使用 HTML 来描述二维图形和绘图程序的语言。只需要定义好属性就可以获得一个用于网络的基于矢量的图形，特点在于改变尺寸也不损失图形质量。 图形被分为：位图 和 矢量图 1. 位图 位图都是像素点成的 它的优点在于： 色彩丰富； 图片效果逼真； 位图的缺点： 放大缩小会导致图片失真； 2.
如何使用SVG.js库中的mask()和clip()方法创建这两种元素，以及它们的常见属性和用法
百度一下 猎人社区
05-15 788
接着，我们调用了clip()方法创建了一个新的clipPath元素，然后使用rect()方法创建了一个宽度为100，高度为100的矩形。然后，我们使用mask()方法创建了一个新的mask元素，接着调用rect()方法创建了一个宽度为100，高度为100的矩形，最后将其添加到mask元素中。上面的代码中，我们首先创建了一个SVG对象，并将其添加到body元素中。接着，我们使用mask()方法创建了一个新的mask元素，然后调用circle()方法创建了一个半径为50的圆形，最后将其添加到mask元素中。
基于svg+js实现简单动态时钟
study_way的博客
10-18 605
可以取值如 “auto”（默认，文本基线对齐到y坐标）、“middle”（文本中点对齐到y坐标）、“text-before-edge”（文本的顶部对齐到y坐标）等。可以取值如 “start”（默认，文本的起点对齐到指定的x坐标）、“middle”（文本的中点对齐到指定的x坐标）、“end”（文本的末尾对齐到指定的x坐标）。属性用于指定文本的起始坐标，即文本的左上角（如果文本是从左到右书写，或者是文本的起点）的坐标。x1：起点x位置，y1：起点的y位置，x2：终点的x位置，y2：终点的y位置。
学习笔记——SVG.js中基本方法——SVG、addTo、size
qq_41339126的博客
05-11 752
SVG.js插件中的SVG()、addTo()、add()、size()、width()、height()方法
SVG基础(初入门的事情)
11-22
SVG.js 是一个轻量级的 JavaScript 库，它为开发人员提供了操作 SVG 和定义动画的便利。SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维矢量图形的图形格式，基于 XML，由 W3C 制定，是一个开放...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值