【概念】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字符串是由命令及其参数组组成的字符 ...
随机推荐
- 基于cucumber接口测试框架的扩展——测试框架总结之cucumber
主要功能: 1.通过fiddler抓取请求,导出xml文件. 2.解析xml文件至excel,或者手工填写excel数据. 3.根据excel中的URL中地址生成的接口集合和feature内容模板生成 ...
- C++静态库与动态库深入研究
什么是库 库是写好的现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说库是一种可执行代码的二进制形式,可以被操 ...
- Win8 使用经验之飞鸽传书
参考资料: http://jingyan.baidu.com/article/c1a3101eb52cd8de656deba6.html Win8的UAC关闭不生效?彻底关闭Win8的UAC? 1. ...
- Logical Volume Manager (Linux)
http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux) Logical Volume Manager (Linux) From Wiki ...
- idea自动注入和自动编译
---恢复内容开始--- 自动编译也就是时时编译,当我们写错代码的时候,idea能够马上报错,这个是不错的功能. 安装操作看下图: 下面这个功能的作用就是,如果你不修改的话,你的项目可以正常运行,但是 ...
- Kubernetes对象之Pod
系列目录 Pod是Kubernetes调度的最小单元.一个Pod可以包含一个或多个容器,因此它可以被看作是内部容器的逻辑宿主机.Pod的设计理念是为了支持多个容器在一个Pod中共享网络和文件系统 因此 ...
- UVA - 11827 - Maximum GCD,10200 - Prime Time (数学)
两个暴力题.. 题目传送:11827 Maximum GCD AC代码: #include <map> #include <set> #include <cmath> ...
- javaScript和jQuery自动加载方法
一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"& ...
- CentOS 安装和配置 Mantis
Mantis是一个基于PHP技术的轻量级的开源缺陷跟踪系统,以Web操作的形式提供项目管理及缺陷跟踪服务.在功能上.实用性上足以满足中小型项目的管理及跟踪.更重要的是其开源,不需要负担任何费用. 1. ...
- Python 008- 游戏2048
#-*- coding:utf-8 -*- import curses from random import randrange, choice # generate and place new ti ...