文档章节

SVG(Scalabe Vector Graphics可伸缩矢量图片)

4112821992
 4112821992
发布于 2017/03/17 18:10
字数 402
阅读 6
收藏 0

1.生成图   SVG元素不被视为html的一部分,相反,它们会被当作嵌入式内容,具有自己的命名空间。

<svg version="1.1" >
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"/>
    <rect x="20" y="75" width="250" height="100" rx="40" ry="20" fill="red" opacity="0.25"/>
    <line x1="100" y1="50" x2="270" y2="175" stroke="rgb(255,255,80)" stroke-width="10px" stroke-linecap="round"/>
</svg>

2.script创建svg

<script>
    var svgns="http://www.w3.org/2000/svg";
    var svg=document.createElementNS(svgns,"svg");
    svg.setAttribute("width",256);
    svg.setAttribute("height",256);
    svg.setAttribute("viewBox","0 0 50 50");
    var shape=document.createElementNS(svgns,"circle");
    shape.setAttribute("cx",25);
    shape.setAttribute("cy",25);
    shape.setAttribute("r","10");
    shape.setAttribute("fill","green");
    svg.appendChild(shape);
    document.body.appendChild(svg);
</script>

3.http://javascript.cs.lmu.edu/curve-editor.svg   SVG案例:一个贝塞尔曲线编辑器

4.SVG支持元素分组,类似于许多绘图程序中的Group功能。通过分组,可以将多个元素看作一个整体进行处理。

和canvas一样,SVG也支持变换。可以将变换作为各个元素的属性,逐一指定,并且他们也可以实现声明性动画。

SVG支持图像处理滤波,允许在像素级别处理绘画中的对象。有模糊/颜色控制和一般卷积等滤波元素可供使用,这些效果中有许多都可以实现声明性动画。

CSS可以与SVG一起使用,如同与HTML一起使用一样:它可以为特定类型或特定群组的元素建立共用的属性值集合或样子集合。和群组一样,利用CSS可以轻松地控制多个元素的外观,不需要单独为每个元素设置属性。

© 著作权归作者所有

共有 人打赏支持
4112821992
粉丝 2
博文 41
码字总数 28256
作品 0
私信 提问
Android中使用SVG实现炫酷动画效果

前言 SVG,即Scalable Vector Graphics 可伸缩矢量图形。这种图像格式在前端中已经使用的非常广泛,而在移动端的开发中,遇到一些复杂的自定义控件或者动画效果,我们就可以考虑使用SVG。 一...

SilenceOO
2017/11/27
0
0
HTML5 内联 SVG

HTML5 支持内联 SVG。 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其...

wybo521
2016/01/01
99
0
SVG入门

SVG SVG意为可缩放矢量图形(Scalable Vector Graphics),是使用XML来描述二维图形和绘图程序的语言。 原文链接 SVG简介 SVG指可伸缩矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用X...

bestvist
2017/11/09
0
0
Android SVG、Vector和VectorDrawable矢量图及动画

Vector图像,第三方Sharp库,阿里巴巴的SVG图。 阿里巴巴矢量图库(http://www.iconfont.cn/) Android矢量图(一)--VectorDrawable基础- https://www.jianshu.com/p/0972a0d290e9 android下一些...

desaco
2018/10/18
0
0
SVG前戏—让你的View多姿多彩

什么是SVG SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形。是一种基于可扩展标记语言(XML)。它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降。它的优点在于...

codeGoogle
2018/08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

技术复习-Spring事务

spring事务 1.事务传播机制 在spring中事务存在嵌套的情况,在这种情况下事务如何协调,spring在TransactionDefinition中设了七个规则,被称作事务的传播机制 1.TransactionDefinition.PROP...

Lubby
23分钟前
1
0
linux 虚拟机安装

一、虚拟化检查 1. 检查cpu是否支持 grep -E 'vmx|svm' /proc/cpuinfo 2. 检查虚拟化是否开启 lsmod |grep kvm 显示内容与截图一致,服务器已经开启了虚拟化的支持,如果没有前2条内容,...

小儿
23分钟前
2
0
Linux之系统日志简介

前言 日志在排查文件的时候至关重要,在Linux上一般跟系统相关的日志默认都会放到/var/log下面。 1、/var/log/boot.log 一般包含系统启动时的日志,包括自启动的服务。 2、/var/log/btmp 记录...

城市之雾
24分钟前
1
0
Android数据存储2 文件存储

1.内部存储(私有的,其他程序不能获取) a. 存:FileOutputStream fos = openFileOutput("file", MODE_PRIVATE); 读: FileInputStream fis = openFileInput("file"); 文件路径:data/data/当......

Coding缘
24分钟前
1
0
23种设计模式全解析

一、设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式,共七种:适配器模式、装饰器模式、代理...

嘿嘿嘿IT
25分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部