【概念】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字符串是由命令及其参数组组成的字符 ...
随机推荐
- javascript --- 临时构造器F()
这篇内容也是之前讲到过的,纯属无聊,莫要见怪.~(- ̄▽ ̄)-~(- ̄▽ ̄)-~(- ̄▽ ̄)-~(- ̄▽ ̄)-~(- ̄▽ ̄)- 正如上文所说,如果所有的prototype属性都指向了一个相同的对象,父 ...
- DevExpress右键菜单使用 z
添加BarManager和popupMenu组建: 设置popupMenu组件的Manager属性: 右键点击popupMenu主键,点击Customize选项添加菜单: 然后便可添加到鼠标事件 ...
- Unity -- Collider(碰撞器与触发器)
(2d与3d的Collider可以相互存在,但是无法相互协作,如2d是无法检测3d的,反之,一样) 在目前掌握的情况分析,在Unity中参与碰撞的物体分2大块:1.发起碰撞的物体.2.接收碰撞的物体. ...
- Unity Shaders and Effects Cookbook (3-4) 使用高光贴图
在学习完上一节之后.已经了解了在Unity 中怎样实现一个高光 Shader ,可是会有一个问题.就是效果看起来不切实际,如以下的问题 我用一张图片贴到了Cube上面.然后用了一个高光材质,得到了下图 ...
- [ACM] hdu 1217 Arbitrage (bellman_ford最短路,推断是否有正权回路或Floyed)
Arbitrage Problem Description Arbitrage is the use of discrepancies in currency exchange rates to tr ...
- HTML marquee标签
marquee语法 <marquee></marquee> 实例一<marquee>Hello, World</marquee> marquee常 ...
- 脱了裤子放屁之std::string
一个天天跟c#奋斗的苦逼c++程序猿 改自己曾经代码的时候发现有例如以下几行. char szPath[MAX_PATH] = {0}; GetModuleFileNameA(NULL,szPath, ...
- EasyRTMP实现的一套简单、高效、易用的全平台(Windows/Linux/ARM/Android/iOS)RTMP直播推送库
本文转自EasyDarwin开源团队成员Kim的博客:http://blog.csdn.net/jinlong0603/article/details/52938980 EasyRTMP介绍 Easy ...
- Vue使用axios
main.js------------------- import axios from "axios"; import qs from "qs"; imp ...
- wcf系列(一)--- 寄宿方式
一.自我寄宿(self-hosting) 1.wcf采用基于终结点(Endpoint)的通信手段:终结点由:地址(Address)+绑定(Binding)+契约(Contract)组成: Enpoi ...