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)的更多相关文章

  1. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  2. SVG 学学就会了。

    SVG 随便学学就会了 这两天闲来没事把 Echart 换成 Rechart 感觉世界都清爽了.因为 rechart 使用 svg 来渲染,所以顺带学了下 SVG 感觉很轻松哦. 概念 SVG 是 w ...

  3. android studio集成融云 SDK 后在部分机型启动对话时崩溃

    最初构建项目是 eclipse, 后来切换到 android studio来做开发. 后来多个用户反馈在android4.4机型上存在启动对话崩溃的问题.但是IOS 版工程从来没有重现. 调试报错信息 ...

  4. H5小内容(四)

    SVG   基本内容     SVG并不属于HTML5专有内容       HTML5提供有关SVG原生的内容     在HTML5出现之前,就有SVG内容     SVG,简单来说就是矢量图     ...

  5. Android Vector曲折的兼容之路

    Android Vector曲折的兼容之路 两年前写书的时候,就在研究Android L提出的Vector,可研究下来发现,完全不具备兼容性,相信这也是它没有被广泛使用的一个原因,经过Google的不 ...

  6. Android Drawable Mipmap Vector使用及Vector兼容

    原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...

  7. 【概念】SVG(1)

    ok,我们讲讲svg 学习前提:懂HTML和基本的XML SVG简介: 1.SVG全称Scable Vector Graphic,可伸缩的矢量图 2.SVG用于定义针对于Web的基于矢量的图形 3.S ...

  8. 关于SVG的viewBox

    在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...

  9. SVG Path高级教程

    课程分为四个方面: 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径,Path字符串是由命令及其参数组组成的字符 ...

随机推荐

  1. javascript --- 临时构造器F()

    这篇内容也是之前讲到过的,纯属无聊,莫要见怪.~(- ̄▽ ̄)-~(- ̄▽ ̄)-~(- ̄▽ ̄)-~(- ̄▽ ̄)-~(- ̄▽ ̄)- 正如上文所说,如果所有的prototype属性都指向了一个相同的对象,父 ...

  2. DevExpress右键菜单使用 z

    添加BarManager和popupMenu组建: 设置popupMenu组件的Manager属性: 右键点击popupMenu主键,点击Customize选项添加菜单:    然后便可添加到鼠标事件 ...

  3. Unity -- Collider(碰撞器与触发器)

    (2d与3d的Collider可以相互存在,但是无法相互协作,如2d是无法检测3d的,反之,一样) 在目前掌握的情况分析,在Unity中参与碰撞的物体分2大块:1.发起碰撞的物体.2.接收碰撞的物体. ...

  4. Unity Shaders and Effects Cookbook (3-4) 使用高光贴图

    在学习完上一节之后.已经了解了在Unity 中怎样实现一个高光 Shader ,可是会有一个问题.就是效果看起来不切实际,如以下的问题 我用一张图片贴到了Cube上面.然后用了一个高光材质,得到了下图 ...

  5. [ACM] hdu 1217 Arbitrage (bellman_ford最短路,推断是否有正权回路或Floyed)

    Arbitrage Problem Description Arbitrage is the use of discrepancies in currency exchange rates to tr ...

  6. HTML marquee标签

    marquee语法    <marquee></marquee> 实例一<marquee>Hello, World</marquee> marquee常 ...

  7. 脱了裤子放屁之std::string

    一个天天跟c#奋斗的苦逼c++程序猿 改自己曾经代码的时候发现有例如以下几行. char szPath[MAX_PATH] = {0}; GetModuleFileNameA(NULL,szPath, ...

  8. EasyRTMP实现的一套简单、高效、易用的全平台(Windows/Linux/ARM/Android/iOS)RTMP直播推送库

    本文转自EasyDarwin开源团队成员Kim的博客:http://blog.csdn.net/jinlong0603/article/details/52938980 EasyRTMP介绍 Easy ...

  9. Vue使用axios

    main.js-------------------   import axios from "axios"; import qs from "qs"; imp ...

  10. wcf系列(一)--- 寄宿方式

    一.自我寄宿(self-hosting) 1.wcf采用基于终结点(Endpoint)的通信手段:终结点由:地址(Address)+绑定(Binding)+契约(Contract)组成:  Enpoi ...