SVG图形引用、裁切、蒙版

SVG图形引用、裁切、蒙版,使用三个标签:

 1. <use>标签创建图形引用 
2. <clipPath>标签裁切图形 
3. <mask>标签创建蒙版 

<use>标签

<use>标签使用URI引用一个<g>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。复制的是原始的元素,因此文件中的原始存在只是一个参考,原始影响到所有副本的任何改变。

<use>标签,使用xlink:href属性引用图形,xlink:href=”#id” 。

 

例子:

  1. >
  2. <html>
  3.      <head>
  4.           <meta charset=“UTF-8”>
  5.           <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
  6.           <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  7.           <title>SVG-demotitle>
  8.           <style>
  9.                html,body{
  10.                     width:100%;
  11.                     height:100%;
  12.                     margin:0;
  13.                     padding:0;
  14.                }
  15.           style>
  16.      head>
  17. <body>
  18. <svg width=“100%” height=“100%” version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
  19.      <rect id=“rU” x=“0” y=“0” width=“100” height=“100” fill=“red” />
  20.      <text x=“50” y=“50” text-anchor=“middle” fill=“white”>原型text>
  21.      <use xlink:href=“#rU” y=“120”/>
  22.      <text x=“50” y=“180” text-anchor=“middle” fill=“white”>简单引用text>
  23.      <use xlink:href=“#rU” y=“240” fill=“green”/>
  24.      <text x=“50” y=“300” text-anchor=“middle” fill=“white”>改fill绿色text>
  25.      <use xlink:href=“#rU” x=“120” y=“0” width=“50” height=“50”/>
  26.      <text x=“170” y=“50” text-anchor=“middle” fill=“white”>设小宽高text>
  27.      <use xlink:href=“#rU” x=“120” y=“120” width=“200” height=“200”/>
  28.      <text x=“170” y=“180” text-anchor=“middle” fill=“white”>设大宽高text>
  29.      <use xlink:href=“#rU” x=“120” y=“240” style=“background:green;”/>
  30.      <text x=“170” y=“300” text-anchor=“middle” fill=“white”>设置样式text>
  31.      <use xlink:href=“#rU” x=“240” y=“0” stroke=“blue” stroke-width=“2” />
  32.      <text x=“290” y=“50” text-anchor=“middle” fill=“white”>额外边框text>
  33. svg>
  34. body>
  35. html>

效果:

结论:

从上面代码可以得出,原型已经设置的属性,引用会继承,并且不能覆盖,除了x、y。所以想引用能够设某个属性,那原型就不能设置。

       <clipPath>标签
       <clipPath>标签用来定义剪切路径,标签内可创建任意数量的基本形状,包括<path>和<text>元素。图形使用clip-path属性来引用clipPath来做裁切 , clip-path=”url(#clip-id)” 。
clip-rule
clip-rule = “nonzero(默认值) | evenodd | inherit”
这个属性用于确定哪些点是属于裁剪路劲内部的点。对于简单的封闭图形,这个很好判定,但是对于复杂的内部有洞的图形,就有区别了。这个属性的取值与fill-rule的取值含义是一样的。
PS:fill-rule计算方式可以查看:http://blog.csdn.net/cuixiping/article/details/7848369
例子:

 

  1. <svg width=“100%” height=“100%” version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
  2.      <defs>
  3.           <clipPath id=“c-star”>
  4.                <polygon points=”150 100 179.389 9.54915 102.447 65.4509
  5.              197.533 65.4509 120.611 9.54915″/>
  6.           clipPath>
  7.           <clipPath id=“c-star-rule”>
  8.                <polygon points=”150 100 179.389 9.54915 102.447 65.4509 197.533
  9.                    65.4509 120.611 9.54915″ transform=“translate(-100)” clip-rule=“evenodd”/>
  10.           clipPath>
  11.           <clipPath id=“c-two-grap”>
  12.                <polygon points=”150 100 179.389 9.54915 102.447 65.4509
  13.              197.533 65.4509 120.611 9.54915″ transform=“translate(0, 100)” />
  14.                <rect x=“100” y=“100” width=“50” height=“50” />
  15.           clipPath>
  16.      defs>
  17.      <rect x=“100” y=“0” fill=“red” width=“100” height=“100” clip-path=“url(#c-star)”/>
  18.      <rect x=“0” y=“0” fill=“green” width=“100” height=“100” clip-path=“url(#c-star-rule)”/>
  19.      <rect x=“100” y=“100” fill=“blue” width=“100” height=“100” clip-path=“url(#c-two-grap)”/>
  20. svg>
效果:
        结论:
        所有在裁剪路径内的图形都可见,所有在裁剪路径外的图形都不可见。

<mask>标签

蒙板(mask)是一种容器,它定义了一组图形并将它们作为半透明的媒介,可以用来组合前景对象和背景。

裁剪路径和其他的蒙板一个重要的区别就是:裁剪路径是1位蒙板,也就是说裁剪路径覆盖的对象要么就是全透明(可见的,位于裁剪路径内部),要么就是全不透明(不可见,位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。

例子:

  1. <svg width=“100%” height=“100%” version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
  2.      <defs>
  3.           <linearGradient id=“Gradient” gradientUnits=“userSpaceOnUse”
  4.         x1=“0” y1=“0” x2=“800” y2=“0”>
  5.                <stop offset=“0” stop-color=“white” stop-opacity=“0” />
  6.                <stop offset=“1” stop-color=“white” stop-opacity=“1” />
  7.           linearGradient>  
  8.           <mask id=“Mask” maskUnits=“userSpaceOnUse” x=“0” y=“0” width=“800” height=“300”>
  9.                <rect x=“0” y=“0” width=“800” height=“300” fill=“url(#Gradient)” />
  10.           mask>  
  11.           <mask id=“Mask2” maskUnits=“userSpaceOnUse” x=“0” y=“0” width=“800” height=“300”>
  12.                <rect x=“0” y=“0” width=“800” height=“300” fill=“red” />
  13.           mask>  
  14.           <text id=“Text” x=“400” y=“200” font-family=“Verdana” font-size=“100”
  15.         text-anchor=“middle” >
  16.                Masked text
  17.           text>  
  18.      defs>  
  19.      <rect x=“0” y=“0” width=“800” height=“300” fill=“none” />
  20.      <use xlink:href=“#Text” fill=“blue” y=“-100” />
  21.      <use xlink:href=“#Text” fill=“blue” mask=“url(#Mask)” />
  22.      <use xlink:href=“#Text” fill=“blue” mask=“url(#Mask2)” y=“100” />
  23. svg>  

效果:

结论:

蒙板的效果,基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度,然后在渲染对象的时候,在对象上面罩上这个带有不同透明度的蒙板层,体现出蒙板的遮挡效果。

总结

关于蒙板的,我还是有个疑问,就是这个计算透明度的具体方式。这个问题牵涉出每个点的颜色跟最终的透明度的关系,是否存在某些颜色算出的最终的透明度是一样的(我在尝试蒙板代码时,发现Mask2只要不是设置黑白,其他颜色的效果都一样)。

参考文献

1. http://www.jb51.net/html5/72268.html

2. http://blog.csdn.net/cuixiping/article/details/7848369

原文地址 :http://www.cnblogs.com/lovesong/p/6006264.html

利用HTML和CSS实现常见的布局

  单列布局


  水平居中

水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

使用inline-block 和 text-align实现

 

优点:兼容性好;

不足:需要同时设置子元素和父元素

使用margin:0 auto来实现

 

优点:兼容性好

缺点: 需要指定宽度

使用table实现

 

优点:只需要对自身进行设置

不足:IE6,7需要调整结构

使用绝对定位实现

不足:兼容性差,IE9及以上可用

实用flex布局实现

缺点:兼容性差,如果进行大面积的布局可能会影响效率

  垂直居中

vertical-align

  我们都知道,每个人都有不同的嗜好,有的人喜欢吃甜食,有的人喜欢吃辣的东西,有的人不喜欢吃芹菜,有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样,他们有的只对牛奶感兴趣,有的只喜欢吃坚果和果冻,而讨厌牛奶。而vertical-align呢,是个比较挑食的家伙,它只喜欢吃果冻,从小吃果冻长大,没有了果冻,它就会闹脾气,对你不理不睬。我称之为“果冻依赖型元素”,又称之为“inline-block依赖型元素”,也就是说,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识

在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;

实用绝对定位

实用flex实现

 

  水平垂直全部居中

利用vertical-align,text-align,inline-block实现

利用绝对定位实现

利用flex实现

  多列布局


  左列定宽,右列自适应

该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局

 

  利用float margin实现

注:IE6会有3px的bug

利用float margin(fix)实现

 

使用float overflow实现

overflow:hidden,触发bfc模式,浮动无法影响,隔离其他元素,IE6不支持,左侧left设置margin-left当作left与right之间的边距,右侧利用overflow:hidden 进行形成bfc模式

如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高

使用table实现

实用flex实现

利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等

  右列定宽,左列自适应

实用float margin实现

使用table实现

实用flex实现

  两列定宽,一列自适应

 

  基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应

利用float margin实现

利用float overflow实现

利用table实现

利用flex实现

  两侧定宽,中栏自适应

 

  利用float margin实现

利用table实现

利用flex实现

  一列不定宽,一列自适应

 

  利用float overflow实现

利用table实现

利用flex实现

  多列等分布局

多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。

 

  html结构如下所示

实用float实现

利用table实现

利用flex实现

  九宫格布局

使用table实现

实用flex实现

  全屏布局


 

  利用绝对定位实现

  利用flex实现

  响应式布局


meta标签的实用

设置布局宽度等于设备宽度,布局viewport等于度量viewport

  媒体查询

  HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果。

语法

 

CSS全攻略(不懂CSS的人可以进来看看)

一、CSS的四种实现方式:

1.内嵌式:

2.外链式:

3.导入式

3.属性式:

二.CSS的定义:
选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
如:

三.四种选择对象

1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊对象 (a:hover a:link a:visited a:active)

1.HTML selector
HTML selector就是HTML的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。

例:

注意:在<TD>中没有应用什么,其中文字自动变红色。

2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class=”classname””的置标符。

例:

注意:在第二个<TD>中没有“class=”fontRed””,所以文字没有变红色。

3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID=”classname””的置标符。

例:

注意:在第二个<TD>中没有“ID=”fontRed””,所以文字没有变红色。

4.特殊对象
特殊对象包括四种,是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规,非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接

特殊对象的作用范围是所有<a>置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。

例:

注意下面,很有用!!!
a.classname:hover
a#IDname:hover
这 两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class=”classname””或 “ID=”IDname””的<a>置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下艺网(http://150643.com)的主页上导航栏文字与普通文章标题在鼠标时的区别。

四.应用:
1.置标符 自动应用
2.特制类 class=”NAME”
3.ID   ID=”IDname”
4.特殊对象 自动应用

五.CSS属性
CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了

网站头部head之间的内容

head区是指首页HTML代码的<head>和</head>之间的内容。
必须加入的标签

1.公司版权注释
<!— The site is designed by Maketown,Inc 06/2000 —>

2.网页显示字符集
简体中文:<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
繁体中文:<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=BIG5″>
英 语:<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>

3.网页制作者信息
<META name=”author” content=”150643.com”>

4.网站简介
<META NAME=”DESCRIPTION” CONTENT=”xxxxxxxxxxxxxxxxxxxxxxxxxx”>

5.搜索关键字
<META NAME=”keywords” CONTENT=”xxxx,xxxx,xxx,xxxxx,xxxx,”>

6.网页的css规范
<LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>
(参见目录及命名规范)

7.网页标题
<title>开拓者博客</title>

可以选择加入的标签


1.设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>

2.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>

3.用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV=”Window-target” CONTENT=”_top”>

4.自动跳转。
<META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http://150643.com”>
5指时间停留5秒。

5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
<META NAME=”robots” CONTENT=”none”>
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

6.收藏夹图标
<link rel = “Shortcut Icon” href=”favicon.ico”>

所有的javascript的调用尽量采取外部调用.
< SCRIPT LANGUAGE=”javascript” SRC=”script/xxxxx.js”></SCRIPT>

附<body>标签:
<body>标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景<body bgcolor=”#FFFFFF”>

html表单

QQ截图20160722115412

 

尺寸的表示

QQ截图20160215192456.jpg

课后作业:除了排序px,%,em,还有没有其他尺寸的定义方式!

首页实战-1

QQ截图20160214200914.jpg

201602141455451888995189

html+css CSS中margin和padding的区别

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距.

      在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

      下面讲解 padding和margin常用的用法

一、padding

1、语法结构

(1)padding-left:10px; 左内边距

(2)padding-right:10px; 右内边距

(3)padding-top:10px; 上内边距

(4)padding-bottom:10px; 下内边距

(5)padding:10px; 四边统一内边距

(6)padding:10px 20px; 上下、左右内边距

(7)padding:10px 20px 30px; 上、左右、下内边距

(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

2、可能取的值

(1)length  规定具体单位记的内边距长度

(2)%       基于父元素的宽度的内边距的长度

(3)auto    浏览器计算内边距

(4)inherit 规定应该从父元素继承内边距

3、浏览器兼容问题

(1)所有浏览器都支持padding属性

(2)任何版本IE都不支持属性值“inherit”

二、margin

1、语法结构

(1)margin-left:10px; 左外边距

(2)margin-right:10px; 右外边距

(3)margin-top:10px; 上外边距

(4)margin-bottom:10px; 下外边距

(5)margin:10px; 四边统一外边距

(6)margin:10px 20px; 上下、左右外边距

(7)margin:10px 20px 30px; 上、左右、下外边距

(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

2、可能取的值

(1)length  规定具体单位记的外边距长度

(2)%       基于父元素的宽度的外边距的长度

(3)auto    浏览器计算外边距

(4)inherit 规定应该从父元素继承外边距

 

3、浏览器兼容问题

(1)所有浏览器都支持margin属性

(2)任何版本IE都不支持属性值“inherit”

 

  margin和padding的区别用图表示为:

20134828104816_0.jpg

精确控制图片的位置

background-position
基本特性
初始值: 0% 0% 适用于: 块状元素和替换元素(block-level and replaced elements )
继承性: 百分比: 根据元素大小(refer to the size of the box itself)
媒体: visual 版本: CSS1
兼容性: IE4+ NS6+
基本语法

background-position : length || length

background-position : position || position

语法取值
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position :  top | center | bottom | left | center | right
                                                                                                                                           顶部  中心       底部        左边 中心       右边
使用说明
设 置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。对应的脚本特性为 backgroundPosition 。
代码示例
1
2 BODY { background: url(“banner.jpeg”) right top }    /* 100%   0% */
3 BODY { background: url(“banner.jpeg”) top center }   /*  50%   0% */
4 BODY { background: url(“banner.jpeg”) center }       /*  50%  50% */
5 BODY { background: url(“banner.jpeg”) bottom }       /*  50% 100% */
6
7 BODY {
8   background-image: url(“logo.png”);
9   background-attachment: fixed;
10   background-position: 100% 100%;
11   background-repeat: no-repeat;
12 }
13

css文字控制

QQ截图20160201202521.png

块状与内联 转化

作业:display可以转化block,inline,none。还可以转化那些?查…

css控制段落 字体居中 下划线 字与字之间的距离

 

字体颜色如何设置?用内联元素,俗称“行内元素”

QQ截图20160603220406

201602011454304841495411

margin重叠现象!!!

上下距离