svg常见形状
SVG是使用XML来描述二维图形和绘图程序的语言。是指可伸缩矢量图形(Scalable Vector Graphics),svg、图像在放大或改变尺寸的情况下图形质量不会有所损失。
svg的主要竞争者是Flash(未开源的私有技术)
HTML中引入svg文件:<embed>、 <object>(不能使用脚本)、 <iframe>
<embed src=" " width=" " height=" " type="image/svg+xml">
svg形状
1、圆形
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- y、x圆形起点坐标(默认为(, )),r为圆半径,stoke边框色,stroke-width边框宽度,fill填充色 stroke-opacity边框透明度 fill-opacity填充色透明度-->
<circle cx="" cy="" r="" stroke="black" stroke-width="" fill="red" fill-opacity="" stroke-opacity=""/>
</svg>
2.矩形
<?xml version="1.0" standalone="no" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="" height="" style="fill: rgb(12,23,34);stroke:#0f0; stroke-width:2" />
</svg>
<?xml version="1.0" standalone="no" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- rx,ry产生圆角, opacity 属性定义整个元素的透明值 -->
<rect width="" height="" x="" y="" style="fill:blue; stroke:pink; stroke-width:5;stroke-opacity:.5; rx:20; ry:20"/>
</svg>
3.椭圆
<?xml version="1.0" standalone="no" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- cx,cx原点;rx,ry半径 -->
<ellipse width="200" height="100" cx="100" cy="50" rx="100" ry="50" style="fill: rgb(12,23,34);stroke:#0f0; stroke-width:2" />
</svg>
4.线
<?xml version="1.0" standalone="no" ?> <!-- xml声明,standalone规定svg是否为独立的文件 -->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- x1,y1:线条开始位置,x2,y2:线条结束位置 -->
<line x1="0" y1="50" x2="300" y2="50" style="stroke:red; stroke-width:3"/>
</svg>
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0 0, 20 20, 70 30, 40 40, 40 40, 60 60" style="fill:yellow; stroke:green; stroke-width:2" />
</svg>
5.多边形
<?xml version="1.0" standalone="no" ?> <!-- xml声明,standalone规定svg是否为独立的文件 -->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- points定义多边形每个角的x,y坐标 -->
<polygon points="0 0, 100 0, 130 50, 100 100,0 50" style="stroke:red; stroke-width:3; fill: green"/>
</svg>
6.路径
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--大写表示绝对位置,小写相对位置
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath-->
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274
" style="fill:green;stroke:red;stroke-width:2"/>
</svg>
7.文字
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- x,y起点位置 fill字体色 transform -->
<text x="0" y="15" fill="red">I love SVG</text>
<text x="0" y="50" fill="green" transform="rotate(30 20, 40)">I LOVE svg</text>
<text x="10" y="90" style="fill:red;">Several lines:
<tspan x="10" y="115">First line</tspan>
<tspan x="10" y="140">Second line</tspan>
</text>
</svg>
svg常见形状的更多相关文章
- SVG基本形状及样式设置
前面的话 图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...
- 数据可视化系列--svg入门基础(一)
一.前言 1.SVG(Scalable Vector Graphics)可伸缩矢量图形 特点: (1)使用xml格式来定义图形: (2)用来定义web上的使用的矢量图: (3)改变图像尺寸,图片质量不 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- SVG 路径(path)
本文转自:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths <path>元素是SVG基本形状中最强大的一个,它 ...
- 关于svg
动画:css3动画,canvas(js动画),svg(html动画). svg基本元素 version: 表示 <svg> 的版本,目前只有 1.0,1.1 两种 xmlns:http:/ ...
- SVG笔记
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide Web C ...
- HTML5学习--SVG全攻略(基础篇)
明天高级篇 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形.SVG 图像在放大或 ...
- p2 形状
形状是物理引擎进行碰撞模拟计算的依据,是刚体最基本的属性. P2中使用Shape类来表示形状,通过刚体的addShape()方法,将形状添加到刚体中之后, 就可以随着刚体的移动.旋转不断更新,并进行碰 ...
- svg矢量图制作工具(Sketsa SVG Editor) v7.1.1 中文免费版
下载地址:https://www.jb51.net/softs/555253.html Sketsa SVG Editor中文版是一款强大好用的矢量图绘制工具,该工具的最大特色就是集成了中文语言,且支 ...
随机推荐
- rebar3自动编译
功能:修改完代码可以自动编译加载到VM中 必须安装的软件: Linux: inotify 链接https://github.com/rvoicilas/inotify-tools/wiki 配置: ...
- tp备份数据
<?php namespace Chenlin2103\Controller; class BaksqlController extends MainController{ public $co ...
- python 全栈开发笔记 3
正则表达式 正则表达式(RE)是一种小型的,高度专业化的,它镶嵌在python中,并通过re模块实现,正则表达式编译成一系列的字节码,然后由用c编写的匹配引擎执行. #正则表达式 import re ...
- 深入java----java内存区域及对象的创建
看完深入理解jvm之后自己再用图的方式进行一遍梳理,用以加深理解. 第一部分,首先对整体java运行时内存区域有一个整体框架式的了解. 运行时内存区域的划分如上图所示,那么接下里看看一个对象的创建又怎 ...
- YYY0.1YYY
XXX0.2XXXZZZ目前提供免费下载和自动更新功能,由于自己的时间有限,就我一个开发,后期持续更新在线听歌.mp4转mp3.高音质下载.全球dj网站免费下载功能!ZZZ
- API响应
保证API响应的正确性,就是你需要做的大部分工作.postman的response viewer部分会协助你完成该工作且使其变得简单. 一个API的响应包含body,headers,响应状态码.pos ...
- Vue框架是什么,有什么特点,怎么用
一.Vue基本介绍 1.vue是渐进式的JavaScript框架 2.作者:尤雨溪(一位华裔前Google工程师) 3.作用:动态构建用户界面 二:Vue的特点 1.遵循MVVM模式(m->mo ...
- TCP学习总结(三)
TCP的流量控制 1.利用滑动窗口实现流量控制 所谓流量控制,就是让发送方的发送速率不要太快,要让接收方来得及接收.利用下图来说明如何利用滑动窗口机制进行流量控制: 一开始(connect后),B告诉 ...
- 2017-10-22模拟赛T2 或(or.*)
题面 [题目描述]你需要构造一个长度为 n 的数列 X,当中的数字范围从 0 到 2^30-1.除此之外你需要满足 m 个条件,第 i 个条件为 X[li]|X[li+1]|……|X[ri]=pi.| ...
- sql注入1
一.函数 1.version() MYsql版本 2.user() 数据库用户名 3.database() 数据库名 4.@@datadir 数据库路径 5.@@version_compi ...