SVG基本图形[通俗易懂]

SVG基本图形[通俗易懂]SVG是使用XML来描述二维图形和绘图程序的语言SVG指可伸缩矢量图形(ScalableVectorGraphics)SVG用来定义用于网络的基于矢量的图形SVG使用XML

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG坐标系统:

SVG基本图形[通俗易懂]

一、圆

SVG基本图形[通俗易懂]

<svg width="50" height="50">
    <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"></circle>
</svg>

cx和cy属性定义圆点的x和y坐标,如果省略cx和cy,圆的中心会被设置为(0,0);r定义半径;

fill:内部填充颜色;stroke:轮廓颜色;stroke-width:轮廓宽;opacity:透明度, 0.0完全透明,1.0不透明

二、矩形

SVG基本图形[通俗易懂]

<rect x="0" y="0" width="500" height="50"/>

三、椭圆

SVG基本图形[通俗易懂]

<ellipse cx="250" cy="25" rx="100" ry="25"/>

四、线条line

SVG基本图形[通俗易懂]

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

五、折线polyline

用来创建只包含直线的形状

SVG基本图形[通俗易懂]

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

 

六、路径path

下面的命令可用于路径数据:(命令详情可查看https://segmentfault.com/a/1190000005053782)

  • M = moveto   两个参数 画笔起始位置
  • L = lineto    两个参数,画直线(x ,y)坐标 ,在当前位置和新位置(L前面画笔所在的点)之间画一条线段
  • H = horizontal lineto         一个参数,绘制水平直线
  • V = vertical lineto     一个参数,绘制垂直线
  • C = curveto   三次贝塞尔曲线 命令参数:C x1 y1, x2 y2, x y  起点控制点,终点控制点,终点
  • S = smooth curveto  简写的贝塞尔曲线命令 命令参数:S x2 y2, x y
  • Q = quadratic Belzier curve   二次贝塞尔曲线 命令参数:Q x1 y1, x y  控制点,终点坐标
  • T = smooth quadratic Belzier curveto  Q命令的简写 T x y
  • A = elliptical Arc
  • Z = closepath   闭合路径,从当前点画一条直线到路径的起点。不区分大小写

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

SVG基本图形[通俗易懂]

<svg>
    <path d="M250 150 L150 350 L350 350 Z" stroke="blue" stroke-width="2"/>
</svg>

 

五、text

SVG基本图形[通俗易懂]

<text x="250" y="25" fill="gray" font-family="serif" font-size="25">Easy-peasy</text>


Layering and Drawing Order


SVG基本图形[通俗易懂]
<svg width="500" height="50">
  <rect x="0" y="0" width="30" height="30" fill="purple"/>
  <rect x="20" y="5" width="30" height="30" fill="blue"/>
  <rect x="40" y="10" width="30" height="30" fill="green"/>
  <rect x="60" y="15" width="30" height="30" fill="yellow"/>
  <rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>

Transparency

SVG基本图形[通俗易懂]

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>

SVG基本图形[通俗易懂]

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)"
        stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)"
        stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>

SVG基本图形[通俗易懂]

<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"/>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"/>
</svg>

SVG基本图形[通俗易懂]

<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"
        opacity="0.9"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"
        opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"
        opacity="0.1"/>  //透明度应用在整个circle元素上

 

SVG基本图形[通俗易懂]

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
        stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/167185.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • layui 传递前端请求_layui弹出层如何传值

    layui 传递前端请求_layui弹出层如何传值layui弹出层传值的实现方法:1、从主窗口传值到弹出层;2、从弹出层传值到主窗口;3、通过session互传;4、通过调用父窗口的函数从而获取到父窗口的值。本教程操作环境:Windows7系统、layui1.0版,该方法适用于所有品牌电脑。主要有两部分从主窗口传值到弹出层从弹出层传值到主窗口通过session互传通过调用父窗口的函数从而获取到父窗口的值(相反也是可以的)1、从主窗口传值到弹出层首…

    2022年6月6日
    154
  • WPF Window 窗口获得焦点和失去焦点事件

    WPF Window 窗口获得焦点和失去焦点事件Window窗口获得焦点和失去焦点事件(窗口变为背景窗口、窗口切换等都引起窗口焦点失去)Activated获得焦点事件和Deactivated失去焦点的事件:Activated:获得焦点(首次打开软件时;由别的软件切换回当前软件时;点击当前软件在任务栏的按钮时)Deactivated:失去焦点,与Activated正好相反,(Deactivated=de+activated)使用方法有两种:第一种是在XAML中声明,然后在后台书写执行代码:<W…

    2022年6月23日
    26
  • 汇编语言指令大全(详细)「建议收藏」

    汇编语言指令大全(详细)「建议收藏」汇编语言指令大全8080汇编手册数据传输指令──────────────────────────────它们在存贮器和寄存器、寄存器和输入输出端口之间传送数据。1。通用数据传送指令。MOV传送字或字节。MOVSX先符号扩展,再传送。MOVZX先零扩展,再传送。PUSH把字压入堆栈。POP把字弹出堆栈。PUSHA把AX,CX,DX,BX,SP,BP,SI,DI依次

    2022年4月19日
    49
  • Jmeter并发测试_jmeter并发设置

    Jmeter并发测试_jmeter并发设置jmeter性能测试笔记目的:不同用户同一时间对一个接口进行访问的成功率1.http请求信息将传入的参数用${content}参数化读取2.请求头信息将头部信息msisdn参数化处理3.参数化数据用数据元件CSVDataSetConfig读取数据驱动文件,变量之间用,隔开例如:13613688857,600926200010641268…

    2022年9月30日
    3
  • Vmware安装win10的失败总结

    Vmware安装win10的失败总结下了番茄,萝卜,深度等多个win10镜像均出现各种莫名其妙的小问题,还是linux大法好哇~~失败一:          未手动分区,许久不装windows系统了,忘记了手动分区,用镜像里自带的分区工具,如diskgenius等分区后安装失败二:          分区后需进入bios设置优先从光盘启动的模式失败三:          找不到ghost文件,进入winPE手动查找光盘里…

    2022年6月22日
    276
  • 【甘道夫】Apache Hadoop 2.5.0-cdh5.2.0 HDFS Quotas 配额控制

    【甘道夫】Apache Hadoop 2.5.0-cdh5.2.0 HDFS Quotas 配额控制

    2021年12月16日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号