HTML5新特点之用SVG绘制微信logo,html5svg

HTML5新特新
HTML5 中的一些风趣的新特点:
1、用于油画的 canvas 成分
2、用于媒介回看的 video 和 audio 成分
3、对地点离线存储的越来越好的支撑
4、新的非常规内容成分,举个例子 article、footer、header、nav、section
5、新的表单控件,举个例子 calendar、date、time、email、url、search
SVG绘制图片效果图:

图片 1

代码如下:
代码如下:
<style>
* {
padding: ;
margin: ;
}
body {
background-color: #ddd;
}
.container {
width: px;
height: px;
position: relative;
top: px;
left: %;
transform: translated(-%,,);
background-color:#c;
border-radius: px;
box-shadow: px #cbfbf;
}
.container object{
position:relative;
top:px;
left:px;
}
</style>
<body>
<div class=”container”>
<object data=”logo.svg” width=”” height=”” type=”image/svg+xml”
/>
</div>
</body>

以此是xml格式的代码,跟html文书档案分离的。

代码如下:
<?xml version=”.” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//WC//DTD SVG .//EN”
“;
<svg width=”%” height=”%” version=”.”
xmlns=”;
<ellipse cx=”” cy=”” rx=”” ry=””
style=”fill:rgb(,,);stroke:rgb(,,);stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<polygon points=”, , ,”
style=”fill:#fff;stroke:#fff;stroke-width:”/>
<ellipse cx=”” cy=”” rx=”” ry=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<ellipse cx=”” cy=”” rx=”” ry=””
style=”fill:rgb(,,);stroke:rgb(,,);stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<polygon points=”, , ,”
style=”fill:#fff;stroke:#fff;stroke-width:”/>
</svg>

上述所述是小编给大家享受的HTML5新特征之用SVG绘制的微信logo
,希望对大家具备辅助。

HTML5新特新 HTML5 中的一些风趣的新特点: 1、用于美术的 canvas 元素2、用于媒介重放的 video 和 audi…

图片 2

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形,
主要优势在于可缩放的还要不会耳濡目染图片的质量。

image.png

 

<?xml version=”1.0″ standalone=”no”?>

SVG 在html 中常用的法子

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

1.施用<img>元平素松开SVG图像

<svg version=”1.1″ width=”1000″ height=”1000″
xmlns=”http://www.w3.org/2000/svg”>

<img src=”  width=”300″
/>

cx 和 cy 属性定义圆点的 x 和 y 坐标。即便简单 cx 和
cy,圆的中央会被安装为 (0, 0),r 属性定义圆的半径。
<circle cx=”100″ cy=”50″ r=”40″ stroke=”black”
stroke-width=”2″ fill=”red”/></br>

2.将SVG图像作为背景图像嵌入

rect 成分的 width 和 height 属性可定义矩形的可观和增长幅度

background: url(‘) no-repeat;

  • CSS 的 fill 属性定义矩形的填写颜色(rgb 值、颜色名也许十六进制值)
  • CSS 的 stroke-width 属性定义矩形边框的肥瘦
  • CSS 的 stroke 属性定义矩形边框的水彩
  • x 属性定义矩形的左边手距离浏览器窗口地点
  • y 属性定义矩形的顶部距离浏览器窗口地方
  • CSS 的 fill-opacity 属性定义填充颜色折射率
  • CSS 的 stroke-opacity 属性定义笔触颜色的光滑度
    <rect width=”300″ height=”100″ y=’100′ x=’100′ rx=’40’ ry=’40’
    style=”fill:rgb(0,0,255);stroke-width:1;
    stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;”/></br>

3.用到svg成分,通过代码将SVG图像嵌入到HTML代码中

椭圆
cx 圆点的 x 坐标
cy 圆点的 y 坐标
rx 水平半径
ry垂直半径
<ellipse cx=”640″ cy=”100″ rx=”220″ ry=”30″
style=”fill:purple”/>

<svg width=”100%” height=”100%”>

<ellipse cx=”620″ cy=”70″ rx=”190″ ry=”20″
style=”fill:lime”/>

<rect x=”20″ y=”20″ width=”250″
height=”250″style=”fill:#fecdddd;”/>

<ellipse cx=”610″ cy=”45″ rx=”170″ ry=”15″
style=”fill:yellow”/></br>

</svg>

<line x1=”600″ y1=”300″ x2=”900″ y2=”400″
style=”stroke:rgb(99,99,99);stroke-width:2″/></br>

兼容性

<polygon> 标签用来创制含有非常多于四个边的图片。

IE   9~11          Firefox   40 +       Chrome  43+     Safari   8+    
 Opera  32+

<polygon points=”420,300 500,410 370,450″
style=”fill:#cccccc;
stroke:#000000;stroke-width:1″ /></br>

 

<polyline> 标签用来创制仅包蕴直线的形态
<polyline points=”0,0 0,20 20,20 20,40 40,40 40,60″
style=”fill:white;stroke:red;stroke-width:2″/></br>

svg sprites

<path d=”M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274″
style=”fill:white;stroke:red;stroke-width:2″/></br>

svg sprites类似于css sprites,将逐个svg合併在共同。

filter标签定义SVG滤镜。而且在defs标签内,id定义向图形应用哪个滤镜
url属性把成分链接到有个别滤镜
滤镜简单介绍:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

最要紧的优点正是能压缩页面的加载时间,优化支出流程,以及保障页面中图纸成分的一致性。

滤镜效果是透过 <feGaussianBlur> 标签实行定义的。fe
后缀可用于全体的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的档次
in=”SourceGraphic” 这些某个概念了由全副图像创设作用
<defs>
<filter id=”Gaussian_Blur”>
<feGaussianBlur in=”SourceGraphic” stdDeviation=”10″ />
</filter>
</defs>

试行中咱们得以把整块的svg放在head尾部,
由此能够在一处地点更新svg即可,并非让svg的代码块散落在文书档案的相继地点。

<ellipse cx=”200″ cy=”150″ rx=”70″ ry=”40″
style=”fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)”/></br>

<head>

潜移暗化是一种从一种颜色到另一种颜色的平整对接。其余,可以把多少个颜色的过渡使用到同二个因素上。
在 SVG 中,有三种关键的渐变类型:
线性渐变:水平,垂直,角形
潜移默化的颜料范围可由三种或三种颜色组合。每一个颜色通过三个 <stop>
标签来规定。offset 属性用来定义渐变的启幕和停止地方。

<meta charset=”utf-8″ />

<defs>
<linearGradient id=”orange_red” 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>

<title>svg</title>

<ellipse cx=”600″ cy=”190″ rx=”85″ ry=”55″
style=”fill:url(#orange_red)”/></br>

<svg version=”1.1″ xmlns=”
xmlns:xlink=” width=”32″ height=”158″
viewBox=”0 0 32 158″>

放射性渐变 cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈
<defs>
<radialGradient id=”grey_blue” cx=”50%” cy=”50%” r=”60%”
fx=”50%” fy=”50%”>
<stop offset=”0%” style=”stop-color:rgb(200,200,200);
stop-opacity:0″/>
<stop offset=”100%” style=”stop-color:rgb(0,0,255);
stop-opacity:1″/>
</radialGradient>
</defs>

<!– SVG等省略  –>

<ellipse cx=”630″ cy=”500″ rx=”110″ ry=”100″
style=”fill:url(#grey_blue)”/>

</svg>

</svg>

</head>

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注