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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C#酒店管理系统_酒店管理系统免费

    C#酒店管理系统_酒店管理系统免费1.酒店管理系统概要c#实现的酒店管理系统,里面包含了数据库文件,简易酒店管理系统源码,采用WinFrom程序设计开发的酒店管理系统;应用到标准的三层技术,多个视图工具控件;功能介绍用户可根据自己的需求入住登记不同类型的房间,同时登记个人基本信息,管理员可通过对不同类型房间的管理及房间信息管理设置不同的类型房间进行增删改查,并对入住客户的信息及点退房信息查询,并改变房间的入住与退房或空房间的状态信息2.数据库设计由于数据库较多,所以暂时不放出来,下面我们看运行截图3.运行截图

    2022年9月24日
    2
  • STM32CubeMX学习–(5)SPI读写W25Q128

    CUBE配置SPI配置引脚配置参数配置点击生成代码代码修改 uint8_tData1[4]={0x90,0x00,0x00,0x00}; uint8_tData2[2]={0x00,0x00}; uint8_tRxData[2]={0x00,0x00};/****************************/while(1){ HAL_GP…

    2022年4月13日
    199
  • DropDownList1对数据库的操作「建议收藏」

    DropDownList1对数据库的操作「建议收藏」面试的时候一个DropDownList1控件对数据库的增加难住了,翻翻以前做过的项目,原来如此的简单,晒出来分享一下。    1.添加数据 //得到数据datasetpublicvoidbind(stringsql)       {           stringst=@”DataSource=PC-20140331BMRR\SQLEXPRESS

    2022年7月18日
    15
  • 相机标定(Camera calibration)

    相机标定(Camera calibration)简介摄像机标定(Cameracalibration)简单来说是从世界坐标系换到图像坐标系的过程,也就是求最终的投影矩阵PP的过程,下面相关的部分主要参考UIUC的计算机视觉的课件(网址Spring2016CS543/ECE549 Computervision)。基本的坐标系:世界坐标系(worldcoordinatesystem);相机坐标系(cameracoordina

    2022年5月28日
    39
  • Pytest(1)安装与入门[通俗易懂]

    Pytest(1)安装与入门[通俗易懂]pytest介绍pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高。根据pytest的官方网站介绍,它

    2022年7月31日
    5
  • Chrome内核浏览_三大浏览器内核

    Chrome内核浏览_三大浏览器内核C#开发Chrome内核浏览器(WebKit.net)WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器。这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能。第一步:下载WebKit.net的bin文件。别小看这一步,你不一定能下载成功,原因你懂的。WebKit.net的主页是http://webkitdotnet.sourceforge.net/直接下载0.5版本的windowsbin文件地址为:h

    2025年7月7日
    3

发表回复

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

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