SVG基础一

最新推荐文章于 2024-02-12 13:55:25 发布
最新推荐文章于 2024-02-12 13:55:25 发布
阅读量133 收藏
点赞数 1
分类专栏： js语法基础 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w96098/article/details/115722681
版权 
基本图形：圆形；
cirle  : 设计属性cx，cy圆中心坐标；r半径；fill填充色；stroke边框颜色；stroke-width边框宽度；
<svg xmlns="http://www.w3.org/2000/svg">
	<circle cx="40" cy="100" r="40" fill="green" stroke="black" stroke-width="20"></circle>
</svg>

效果如图

边框并不会撑大元素

矩形；rect;涉及属性：x,y左上角坐标；width，height宽度和高度；rx,ry弧度
<svg xmlns="http://www.w3.org/2000/svg">
	<rect x="50" y="100" width="100" height="100" fill="green" stroke="black" rx="10" ry='10'></rect>
</svg>

线：line；涉及属性：x1,y1起始坐标；x2,y2终点坐标；stroke(-width)线条颜色及宽度；
<svg xmlns="http://www.w3.org/2000/svg">
	<line x1="50" y1="100" x2="500" y2="500" stroke="black" stroke-width="5"></line>
</svg>

fill="transparent"背景色为透明

<body style="height: 100VH;">
	<!-- g标签;用来分组和组合元素;涉及属性transform=translate(100,100) g标签水平坐标可移动整个分组；--> 
	<!--text标签文字text-anchor="middle"居中；start，end居左居右;font-size="20" 字体大小；垂直居中方法已知目测调整~~~~-->
	<!-- image图片 属性xlink:href图片路径；image放到html中才会生效，坐标依据为左上角-->
	<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
		<g cursor="pointer" transform=translate(100,100)  stroke="black" stroke-width="5">
			<image x="-25" y="-25" height="50" xlink:href="qihoo.png"></image>
			<text y="2" font-size="20" text-anchor="middle">文字</text>
		</g>
	</svg>
</body>

在这里插入图片描述

z_healthy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG—最简单的SVG动画
点滴积累
07-26 6万+
本文目的 基础 SVG的几个最基础的命令 M：新建起点，参数x，y（M20， 30） L：连接直线，参数x，y（L30， 20） H：纵坐标不变，横向连线，参数x（H20） V：横坐标不变，纵向连线，参数y（V30） Q：二次贝塞尔曲线，参数x1，y1，x2，y2（Q10，20，30，40） C：三次贝塞尔曲线，参数x1，y1，x2，y2，x3，y3（C10，20，30，4...
SVG 绘制直线
ivenqin的博客
01-04 4136
本节我们来学习如何在 SVG 中绘制直线，要绘制直线可以使用 <line> 元素来实现。 如何绘制直线 我们可以使用 <line> 元素在 SVG 图像内部来绘制线条，要绘制直线，首先要确定直线起点与重点的位置。可以通过元素中的属性来绘制水平直线、垂直直线、斜角直线等。 绘制直线时需要用到四个属性，如下所示： x1： 定义线条在 x 轴的起始坐标。 x2： 定义线条在 x 轴的结束坐标。 y1： 定义线条在 y 轴的开始坐标。 y2： 定义线条在 y 轴的结束坐标。 示例： 例如
SVG动画
tinggu的专栏
12-20 2245
SVG中提供三种常用动画标记
SVG动画解释-学习笔记
CYSNLD的博客
07-18 2693
svg是可缩放的矢量图,元素是SVG图形的容器，SVG用于定义网络的基于矢量的图形，SVG使用XML格式定义图形，SVG图像在放大或改变尺寸的情况下图片质量不会损失,SVG是万维网联盟的标准。
一文带你搞定svgAnimation(Svg动画)
weixin_47121832的博客
02-12 1203
SVG 与 PNG、JPEG 和 GIF 图片相比，拥有很小的尺寸；SVG 是矢量图，可以伸缩，适用各种分辨率；SVG 采用开放标准，本质是 XML，可以被各种工具读取（浏览器、图片管理器、markdown 等）；SVG 图像中的文本是可选的，同时也是可搜索的；SVG 可以与 CSS 结合，获得更强的扩展性。
SVG基本使用（四、动画、动画常用属性、复合动画/往返动画/形变动画/路径动画、脚本编程
coldriversnow的专栏
05-22 4079
一、动画1.SVG动画在SVG中提供了三种常用动画标记animate：基础动画animateTransform：形变动画animateMotion：路径动画2.SVG动画属性attributeType: CSS/XML 规定的属性值的名称空间attributeName: 规定元素的哪个属性会产生动画效果from/to: 从哪到哪dur: 动画时长fill: 动画结束之后的状态 保持freeze结束状态/remove恢复初始状态（默认值）3.SVG动画使用方式。
svg常用属性及动画效果
jieyucx的博客
10-20 1671
SVG是可缩放矢量图形（）的缩写。它是一种基于XML语法的2D矢量图形格式，用于描述二维图形和图像。与传统的栅格图像（如JPEGPNG等）相比，SVG使用数学描述来定义图形，因此可以无损地缩放和放大，而不会失真或失去清晰度。SVG可在各种分辨率和尺寸的设备上显示，并且支持交互性和动画效果，使得它成为一种非常强大和灵活的图形格式。viewBox是SVG元素的一个属性，用于定义SVG画布中可见区域的坐标系和大小。它是一个由4个数值组成的字符串，分别表示左上角的x坐标、左上角的y坐标、宽度和高度。viewBox。
SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）
qq_34306228的博客
09-20 1286
GSAP内置缓动动画，默认的值为,让 circle 像球一样弹起运动。只需设定属性 gsap.timeline() 拥有操纵时间轴线的能力，会让动画有序进行 下面例子时间轴动画时长为 duration: 0.66 ，下面让第 2、3、4 个 circle 使用相对时间，减去动画时长，那么制造了多个 circle 一同运动的效果。 升级版： 提供了一个用于控制时间交错的属性： ，这个属性同样是对动画时间的控制，比如让多个 circle 同时以 的时间错开进行Y轴位移运动
从零学习svg，svg基础总结
07-19
公司需要做一款编辑器，其中的绘图是使用svg图片进行绘制边框，我们需要改变他的路径，让组件样式可以在编辑器设置
html5+svg学习指南之SVG基础知识
09-28
本文主要介绍了SVG的基础概念等知识，以及SVG与CANVAS的区别，最后给出了一个简单示例，方便大家更好的了解SVG可缩放矢量图形。推荐给大家。
网络基础知识与因特网1.svg
最新发布
03-15
网络基础知识与因特网1.svg
SVG开发实践
03-22
第2篇是SVG基础规范篇，介绍W3C组织为SVG定义的标准，涵盖了SVG规范的大部分内容。第3篇是SVG应用篇，介绍SVG开发的经验和技巧，并且通过几个实例来介绍如何进行SVG的开发。本书内容系统，结构清晰，具有较强的指导...
svg动画的几种方式
weixin_43207208的博客
04-13 2731
最近在做的项目中有部分的svg需要做成动画，最开始的想法是转成gif，然后一看，啊，90M！！！实在不能忍，于是和设计妹纸一起研究起了svg动画，发现这玩意儿还是很好玩的，怎么让svg动起来，这是一个很有趣的话题。在目前的开发过程中，一共使用了三种方式，接下来就一一列举一下吧。如果有更好的方式，欢迎补充一起讨论。
SVG实例入门与动画实战
weixin_42684490的博客
03-22 1238
前言 在日常开发过程中，我们或多或少都接触过SVG，有可能是用它来画一些简单的图形，有可能是使用它来构建工程的字体文件库，甚至是用它来绘制一些复杂的可视化模块。本文会详细介绍SVG的基本图形以及常见的动画形式，帮助你了解入门SVG。 基本图形 下面会介绍SVG预设的数种形状以及对应的属性介绍，在实际开发或者设计过程中，绘画SVG图标大多数时候都是会使用一些工具的。 矩形 <svg width="200px" height="200px" version="1.1" xmlns="http://
SVG交互性
qq_27628085的博客
09-13 3149
  目录 什么是SVG？ 语法 SVG在网页中的使用方式 SVG交互 链接 事件 键按下 脚本 交互文本 结束语 什么是SVG？ 是指可伸缩矢量图形 用来定义用于网络的基于矢量的图形 XML 格式定义图形   图像在放大或改变尺寸的情况下其图形质量不会有所损失 是万维网联盟的标准 与诸如 DOM 和 XSL 之类的 W...
深入理解 SVG：开启向量图形的大门(下)
你若盛开，清风自来
12-13 1018
在 SVG（可伸缩向量图形）中，可以使用script元素来定义交互行为，例如鼠标悬停和点击事件。
利用svg显示不规则图形，实现用户点击交互
qq_60178319的博客
08-18 657
例如：项目场景：有下方有三块区域是办公区域，需要鼠标点击后出来对应区域信息。
SVG 保姆级入门知识详解，一篇文章带你上手！
starry-sea1412的博客
05-28 2443
SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于 XML 的矢量图形格式，用于描述二维图形和动画。相比于基于位图的图像格式，如 PNG 和 JPEG，SVG 图像可以无限放大或缩小且不会失真。这篇文章带你了解一下SVG的魅力吧。
bootstrap svg
07-20
### 回答1： Bootstrap是一个流行的前端开发框架，而SVG（可缩放矢量图形）是一种用于在Web上呈现图形的XML基于的标记语言。Bootstrap框架并不直接支持SVG图像，但我们可以通过一些方法将两者结合使用。 首先，我们可以在Bootstrap框架的基础上创建一个具有相应布局和样式的容器。然后，我们可以使用SVG元素来创建图形，并将其嵌入到Bootstrap容器中。为了实现这一点，我们可以在Bootstrap的网格系统中添加一个自定义的列，然后使用SVG元素来绘制我们想要的图形。 另一种方法是使用Bootstrap的自定义样式来为SVG图像添加样式。Bootstrap提供了许多有用的CSS类，可以轻松地为SVG图像添加各种样式，如颜色、边框、阴影等。 此外，我们还可以使用Bootstrap框架内置的JavaScript组件来处理SVG图像。Bootstrap提供了一些常用的组件，如模态框、滑动条等，我们可以使用它们来操作和操纵SVG图像中的元素。 总之，虽然Bootstrap框架本身并不直接支持SVG图像，但我们可以通过一些方法将两者结合使用，从而实现具有响应式布局和漂亮样式的SVG图形。 ### 回答2： Bootstrap是一个流行的前端开发框架，提供了各种强大的组件和工具，可以帮助开发者快速建立响应式的网站和应用程序。 而SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以在网页上展示各种复杂的图形和动画效果。它具有良好的可扩展性和可编辑性。 Bootstrap与SVG可以结合使用，以创建现代化、美观且响应式的网站。在Bootstrap中，可以使用内置的CSS样式和组件来构建基本的页面结构，并使用SVG来添加更多的视觉效果。 与使用普通图像或矢量图标不同，使用SVG可以实现更高级的交互和动画效果。借助Bootstrap提供的CSS和JavaScript，我们可以通过添加类名、样式或事件处理程序来操作SVG元素，实现各种动态效果。比如，我们可以在响应式导航栏中使用SVG图标，当页面被滚动或菜单被展开时，图标可以随之改变颜色或形状。 另外，Bootstrap也提供了内置的图标库（如Font Awesome），通过直接引入这些图标，我们可以轻松地在网页上使用各种矢量图标，而不需要额外的图像文件。这使得图标可以根据需要进行缩放，而不会有质量损失。 总的来说，Bootstrap与SVG的结合可以实现更加丰富和互动的用户界面。它们的使用使得网站开发变得更加简单和高效，同时也提供了更多的设计自由度，以满足用户对于网页视觉效果的需求。 ### 回答3： Bootstrap SVG是指在Bootstrap框架中使用Scalable Vector Graphics(可伸缩矢量图形)的功能。SVG是一种基于XML语法的可缩放矢量图形格式，它支持高质量的图形和动画效果，并且可以通过CSS和JavaScript进行交互。 通过Bootstrap框架集成SVG功能，我们可以在网页中轻松地使用矢量图形，而不必担心像位图一样在放大缩小时出现失真。Bootstrap提供了一些内置的SVG组件和工具，可以让我们快速创建各种矢量图形效果。 Bootstrap SVG的主要用途是创建漂亮且适应不同屏幕尺寸的图标和图形。通过使用内置的SVG图标集，我们可以轻松地在网页中插入各种图标，例如箭头、图表、按钮等。这些图标可以根据需要进行颜色和大小的调整，以适应不同的设计需求。 另外，Bootstrap SVG还提供了一些工具和样式类，帮助我们轻松地控制SVG的样式和行为。例如，我们可以使用CSS样式将SVG图形的颜色、大小、边框等进行自定义。同时，通过JavaScript的支持，我们可以实现一些交互效果，例如图形的动画、鼠标悬停效果等。 总之，Bootstrap SVG是一种方便且强大的工具，可以帮助我们在Bootstrap框架中使用矢量图形。它提供了一系列内置的SVG组件和工具，使我们能够轻松地创建和使用各种图标和图形效果。无论是网页设计师还是开发人员，都可以借助Bootstrap SVG实现更具创意和视觉吸引力的网页设计。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值