SVG图像技术摘要

SVG图像技术摘要

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

      该公司今天没有,研究了最近流行SVG技术,发现,随着css3不断流行,和浏览器技术的发展,SVG网站将取代大量的图片,成为主流站点图片展示。

     AI是我们经常使用的矢量图编辑器,如今AI能够直接另存SVG图片。SVG图片相比传统图片,占位更小,浏览更方便!

并且可扩展性更强!

    以下看一个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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>


解释:

  第一行包括了 XML 声明。请注意 standalone 属性!该属性规定此 SVG 文件是否是“独立的”。或含有对外部文件的引用。

standalone=”no” 意味着 SVG 文档会引用一个外部文件 – 在这里。是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C。含有全部同意的 SVG 元素。

SVG 代码以 <svg> 元素開始,包含开启标签 <svg> 和关闭标签 </svg> 。

这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本号,xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。

cx 和 cy 属性定义圆中心的 x 和 y 坐标。假设忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制怎样显示形状的轮廓。

我们把圆的轮廓设置为 2px 宽,黑边框。

fill 属性设置形状内的颜色。

我们把填充颜色设置为红色。

    

HTML 页面中的 SVG

SVG 文件可通过下面标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。


SVG元素汇总

元素列中的链接指向了详细元素的相关属性和很多其它实用的信息。

元素 描写叙述
a 定义超链接
altGlyph 同意对象性文字进行控制。来呈现特殊的字符数据(比如,音乐符号或亚洲的文字)
altGlyphDef 定义一系列象性符号的替换(比如,音乐符号或者亚洲文字)
altGlyphItem 定义一系列候选的象性符号的替换
animate 随时间动态改变属性
animateColor 规定随时间进行的颜色转换
animateMotion 使元素沿着动作路径移动
animateTransform 对元素进行动态的属性转换
circle 定义圆
clipPath  
color-profile 规定颜色配置描写叙述
cursor 定义独立于平台的光标
definition-src 定义单独的字体定义源
defs 被引用元素的容器
desc 对 SVG 中的元素的纯文本描写叙述 – 并不作为图形的一部分来显示。

用户代理会将其显示为工具提示。

ellipse 定义椭圆
feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix SVG 滤镜。

应用matrix转换。

feComponentTransfer SVG 滤镜。运行数据的 component-wise 重映射。
feComposite SVG 滤镜。

feConvolveMatrix SVG 滤镜。
feDiffuseLighting SVG 滤镜。
feDisplacementMap SVG 滤镜。
feDistantLight SVG 滤镜。

Defines a light source

feFlood SVG 滤镜。

feFuncA SVG 滤镜。

feComponentTransfer 的子元素。

feFuncB SVG 滤镜。feComponentTransfer 的子元素。

feFuncG SVG 滤镜。

feComponentTransfer 的子元素。

feFuncR SVG 滤镜。feComponentTransfer 的子元素。
feGaussianBlur SVG 滤镜。对图像运行高斯模糊。
feImage SVG 滤镜。
feMerge SVG 滤镜。创建累积而上的图像。

feMergeNode SVG 滤镜。feMerge的子元素。
feMorphology SVG 滤镜。

对源图形运行”fattening” 或者 “thinning”。

feOffset SVG 滤镜。

相对与图形的当前位置来移动图像。

fePointLight SVG 滤镜。
feSpecularLighting SVG 滤镜。

feSpotLight SVG 滤镜。

feTile SVG 滤镜。
feTurbulence SVG 滤镜。
filter 滤镜效果的容器。

font 定义字体。
font-face 描写叙述某字体的特点。

font-face-format  
font-face-name  
font-face-src  
font-face-uri  
foreignObject  
g 用于把相关元素进行组合的容器元素。
glyph 为给定的象形符号定义图形。
glyphRef 定义要使用的可能的象形符号。

hkern  
image  
line 定义线条。
linearGradient 定义线性渐变。
marker  
mask  
metadata 规定元数据。
missing-glyph  
mpath  
path 定义路径。
pattern  
polygon 定义由一系列连接的直线组成的封闭形状。

polyline 定义一系列连接的直线。
radialGradient 定义放射形的渐变。
rect 定义矩形。

script 脚本容器。(比如ECMAScript)
set 为指定持续时间的属性设置值
stop  
style 可使样式表直接嵌入SVG内容内部。
svg 定义SVG文档片断。
switch  
symbol  
text  
textPath  
title 对 SVG 中的元素的纯文本描写叙述 – 并不作为图形的一部分来显示。

用户代理会将其显示为工具提示。

tref  
tspan  
use  
view  
vkern  

版权声明:本文博客原创文章,博客,未经同意,不得转载。

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117178.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2018最潮最火背景图_qq主题背景怎么设置自定义

    2018最潮最火背景图_qq主题背景怎么设置自定义登录CSDN后,点击“我的博客”,如右图所示,

    2022年10月11日
  • 一句话木马怎么连接_js木马源码

    一句话木马怎么连接_js木马源码“EASYNEWS新闻管理系统v1.01正式版”是在企业网站中非常常见的一套整站模版,在该网站系统的留言本组件中就存在着数据过滤不严漏洞,如果网站是默认路径和默认文件名安装的话,入侵者可以利用该漏洞直接上传ASP木马程序控制整个网站服务器。Step1搜索入侵目标使用了“EASYNEWS新闻管理系统v1.01正式版”的网站,在网站页面的底部版权声明处,往往会有关键字符为“WWW.52EAS…

    2022年10月30日
  • winform自定义控件开发_listcontrol控件

    winform自定义控件开发_listcontrol控件TcxFilterControl:过滤器控件,根据cxgrid的filterControl建立强大灵活的过滤器-westsoft-博客园TcxTabControl:选项卡控件TcxPageControl:多页面控件TcxPropertiesStore:属性商店TcxImageList:图像列表TcxImageCollection:图像集合,使用:DevExpress控件使用(ImageCollection,TreeList)_hupoluotuo的博客-CSDN博客_devexp

  • container_of宏定义作用_宏内核

    container_of宏定义作用_宏内核内核链表是怎么通过指针域来访问数据域的呢?

  • CPD 算法实现点云配准(python版本)[通俗易懂]

    CPD 算法实现点云配准(python版本)[通俗易懂]CoherentPointDrift相干点漂移算法实现点云配准(python代码)

  • oracle数据库定义变量和使用_oracle执行变量

    oracle数据库定义变量和使用_oracle执行变量一、异常错误介绍我们在使用oracle数据库做程序开发时,一般都会使用plsql做客户端连接查询工具,在写sql语句时plsql经常会报并非所有变量都已绑定01008这样类似的异常错误,通常我们程序员还看不出具体有什么毛病,具体错误提示见下图显示:出现以上这种错误出现的次数多了,我们就会有经验解决了,经过我们常年的工作经验以及网友的问题汇总,得出的最终结论就是:程序员sql语句书写不严谨导致该问题…

发表回复

您的电子邮箱地址不会被公开。

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