【概念】SVG(2)
Style
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
#MyRect:hover {
stroke: black;
fill: red;
}
]]></style>
</defs>
<rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>
样式分离啊,注意上面有个hover,感觉像在使用css一样~
下面是内嵌的,缺点就是木有样式和行为分离:
<rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
最后从外面导入样式
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect height="10" width="10" id="MyRect"/>
</svg>
在style.css文件里面写上
#MyRect {
fill: red;
stroke: black;
}
Gradients
一个gradient就是从一个颜色到另一个颜色的平滑转变。类型:
- Linear
- Radial
Linear
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
执行步骤:
- <linearGradient>标签上的id为每一个gradient定义了与众不同的名字
- <linearGradient> 中的 x1, x2, y1,y2 定义了渐变开始和结束的位置
- 渐变的颜色范围可以是一种亦或多种颜色。每一种颜色都由<stop>标签指定颜色的开始和结束位置。
- ellipse中的fill属性将gradient和ellipse连接起来,也就是渐变作为填充显示在ellipse中
Radial Gradient
<radialGradient> 元素用来定义一个圆圈渐变(a radial gradient).
<radialGradient>元素必须内嵌在<defs> 标签中. <defs>标签用于简短的定义以及包含了一些特殊元素的定义(例如gradients)
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
代码解释:
- <radialGradient>标签上的id为渐变定义了一个独一无二的名字
- cx, cy 和 r 定义了最外围的圆, fx 和fy 定义了内部的圆
- 渐变的颜色范围可以包括两个亦或多个颜色。每个颜色都由<stop>标签定义了颜色的开始和结束。
- 利用ellipse中个fill属性,将渐变作为填充颜色填充到ellipse中
如果不设置fx和fy则默认和cx,cy定义是一样的。
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="0.2" fy="50%">
<radialGradient id="grad1" cx="0.2" cy="50%" r="50%" fx="0.2" fy="50%" spreadMethod="pad">
可以看见默认的设置是spreadMethod="pad",也就是填充
<radialGradient id="grad1" cx="0.2" cy="50%" r="50%" fx="0.2" fy="50%" spreadMethod="repeat">
注意上面是repeat,重复白,蓝渐变
<radialGradient id="grad1" cx="0.2" cy="50%" r="50%" fx="0.2" fy="50%" spreadMethod="reflect">
上面的reflect,和repeat呈现的方式相反,是蓝,白
Pattern
<svg width="200" height="200">
<defs>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
<rect x="0" y="0" width="25" height="25" fill="yellow"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
</svg>
【概念】SVG(2)的更多相关文章
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- SVG 学学就会了。
SVG 随便学学就会了 这两天闲来没事把 Echart 换成 Rechart 感觉世界都清爽了.因为 rechart 使用 svg 来渲染,所以顺带学了下 SVG 感觉很轻松哦. 概念 SVG 是 w ...
- android studio集成融云 SDK 后在部分机型启动对话时崩溃
最初构建项目是 eclipse, 后来切换到 android studio来做开发. 后来多个用户反馈在android4.4机型上存在启动对话崩溃的问题.但是IOS 版工程从来没有重现. 调试报错信息 ...
- H5小内容(四)
SVG 基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 ...
- Android Vector曲折的兼容之路
Android Vector曲折的兼容之路 两年前写书的时候,就在研究Android L提出的Vector,可研究下来发现,完全不具备兼容性,相信这也是它没有被广泛使用的一个原因,经过Google的不 ...
- Android Drawable Mipmap Vector使用及Vector兼容
原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...
- 【概念】SVG(1)
ok,我们讲讲svg 学习前提:懂HTML和基本的XML SVG简介: 1.SVG全称Scable Vector Graphic,可伸缩的矢量图 2.SVG用于定义针对于Web的基于矢量的图形 3.S ...
- 关于SVG的viewBox
在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...
- SVG Path高级教程
课程分为四个方面: 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径,Path字符串是由命令及其参数组组成的字符 ...
随机推荐
- spring aop提供了两种实现方式jdk和cglib
Spring AOP使用了两种代理机制:一种是基于JDK的动态代理:另一种是基于CGLib的动态代理.之所以需要两种代理机制,很大程度上是因为JDK本身只提供接口的代理,而不支持类的代理. Sprin ...
- win7 32位安装pyqt
参考 http://blog.csdn.net/fairyeye/article/details/6607981 http://www.cnblogs.com/toSeek/p/6363036.htm ...
- django忘记超级用户密码的解决方法
用Django shell: 1 python manage.py shell 然后获取你的用户名,并且重设密码: 1 2 3 4 from django.contrib.auth.models im ...
- 线程安全-一个VC下多个网络请求
一.线程安全变量控制显示隐藏loading框 问题描写叙述: 同一页面有两个异步网络请求,第一个请求開始,loading旋转.第二个请求開始loading旋转.第一个结束,loading停止旋转,但是 ...
- NFC模组,开发NFC功能 仅仅要几条指令的事情
特点:实现NFC透明传输.内置NFC协议栈,支持UART串口直接读写,用于门禁能够同一时候兼容手机和卡片开门,还能实现动态密钥,读到的NFC数据自己主动串口输出,会串口就能开发NFC,不须要研究LLC ...
- 【LeetCode-面试算法经典-Java实现】【002-Add Two Numbers (单链表表示的两个数相加)】
[002-Add Two Numbers (单链表表示的两个数相加)] 原题 You are given two linked lists representing two non-negative ...
- UVA 12338 - Anti-Rhyme Pairs(后缀数组+RMQ)
UVA 12338 - Anti-Rhyme Pairs 题目链接 题意:给定一些字符串,每次询问求出两个字符串的最长公共前缀的长度 思路:把字符串排序,就能求出height和rank数组,然后利用R ...
- 找top 10信息
本文章内容来源于<程序猿面试宝典>. 题目: 有1千万条短信,以文本文件的形式保存.一行一条,有反复.请用5分钟时间,找出反复出现最多的前10条. 解析: 某些面试者想用数据库的办法来实现 ...
- cocos2d-x项目101次相遇:在HelloWorld上--建立新场景
cocos2d-x 101次相遇 / 文件夹 1 安装和环境搭建 -xcode 2 Scenes , Director, Layers, Sprites 3 建立图片菜单 4 在 ...
- ARM和X86
嵌入式简介汇总 脚本语言 编程语言 Java C# C ++ 汇编 机器语言 语言 Unix Linux Android + 塞班 + Windows + + + ios系统 基于unix内核的图形化 ...