zoukankan      html  css  js  c++  java

  • svg

    SVG意为可缩放矢量图

    SVG使用XML格式定义图像

    什么是SVG？

    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    • SVG 用来定义用于网络的基于矢量的图形
    • SVG 使用 XML 格式定义图形
    • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
    • SVG 是万维网联盟的标准
    • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

    背景和优势

    在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

    参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

    与其他图像格式相比，使用 SVG 的优势在于：

    • SVG 可被非常多的工具读取和修改（比如记事本）
    • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
    • SVG 是可伸缩的
    • SVG 图像可在任何的分辨率下被高质量地打印
    • SVG 可在图像质量不下降的情况下被放大
    • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
    • SVG 可以与 Java 技术一起运行
    • SVG 是开放的标准
    • SVG 文件是纯粹的 XML

    SVG 的主要竞争者是 Flash。

    <?xml version="1.0"  encoding="UTF-8">
        <!--XML name Space 命名空间，当前标签的使用环境-->
<svg xmlns="http://www.w3.org/2001/XMLSchema">
    <rect width="100" height="50"></rect>
</svg>

    第一行包含XML声明。

    version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

    HTML页面嵌入SVG的4种方法

    1.iframe

    <iframe src="res/svg.html" frameborder="0"></iframe>

    2.object

    <object data="res/svg.html" type=""></object>

    注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

    3.embed

    <embed src="res/svg.html" width="300" height="100"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

    注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。

    4.svg

    <svg width="600" height="600" id="s1">
  <!--<circle r="100" cx="300" cy="300" fill="red"></circle>-->
</svg>

    使用SVG绘制矩形

    <svg width="600" height="600" id="s">
  <rect width="100" height="100" x="0" y="0" fill="red" fill-opacity="0.5" stroke="blue" stroke-width="5" opacity="0.5"></rect>
</svg>
    • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
    • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
    • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
    • CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
    • CSS 的 stroke-width 属性定义轮廓宽度
    • CSS 的 stroke 属性定义轮廓颜色
    • CSS 的 fill 属性定义背景颜色
    • CSS 的 opacity 定义整个元素的透明度（0-1）
    • CSS rx,ry产生圆角

    注意：

      (1)SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。

      (2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操作其属性： rect.setAttribute('','')

      (3)使用JS动态创建SVG元素，

                         1)用svg.innerHTML =''

                         2)用document.createElementNS(''命名空间,创建元素 '')，不能使用document.createElement()

      (4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不同！

    使用SVG绘制圆形

      <circle r="" cx="" cy=""></circle>

    cx,cy定义原点坐标

    r定义半径

    剩下使用通用属性

     使用SVG绘制椭圆

      <ellipse rx="" ry="" cx="" cy=""></ellipse>

    rx,ry属性定义圆点x,y坐标

    cx,cy属性定义水平半径，与垂直半径

     使用SVG绘制直线

      <line x1="0" y1="0" x2="100" y2="0" stroke="red"></line>

    stroke 属性是必须的SVG默认只有填充颜色，没有描边颜色

    例题实现

    <svg width="600" height="600">
  <!--公共属性放在GROUP中,-->
  <g stroke-width="30" stroke="red">
  <line x1="100" y1="150" x2="200" y2="150"></line>
  <line x1="250" y1="150" x2="500" y2="150"></line>

  <line x1="100" y1="300" x2="200" y2="300"></line>
  <line x1="250" y1="300" x2="500" y2="300"></line>

  <line x1="100" y1="450" x2="200" y2="450"></line>
  <line x1="250" y1="450" x2="500" y2="450"></line>
  </g>
</svg>

    通用属性放在<g>标签中</g> 即group（小组），小组内标签继承小组的通用属性

     使用SVG绘制折线

    <svg width="800" height="800">
  <polyline points="100,100 600,100 100,600 350,0 600,600 100,100 " stroke="#000" fill-opacity="0"></polyline>
</svg>

    注意：

    1.fill-opacity="0" ,不然有背景填充

    2.stroke 属性颜色赋值，要不显示不出来

    3.points 去折线的点

     使用SVG绘制多边形         

     <polygon points="100,100 300,300 450,250" fill="red" stroke="red" ></polygon>      

    points 与polyline的属性一样下，x1,y1 x2,y2 定义每个角的坐标

    <g fill="#f45fas">
  <polygon points="0,0 400,200 800,0"></polygon>
  <polygon points="0,100 400,300 800,100 800,800 0,800"></polygon>
</g>

    使用SVG绘制文本

    <g fill="#f45fas">
  <polygon points="0,0 400,200 800,0">
    <span>你号</span> 错误
    
  </polygon>
  <polygon points="0,100 400,300 800,100 800,800 0,800"></polygon>
</g>
    <text font-size="30" alignment-baseline="before-edge">你好</text>
    设置文本基线

      提示：传统的标签不能置于SVG标签内部！同理，SVG的标签也不能放在其它元素内部！

    使用SVG绘制图像

      提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。

      <image width="" height="" xlink:href="x.jpg" x="" y=""></image>

    12.如何使用渐变效果

    linear 线性

    radial 放射性

    <linearGradient ></linearGradient>元素定义线性渐变。

    <linearGradient ></linearGredient>必须在defs内部

    <svg width="600" height="400" id="svg15">

      <!--渐变属于特效，必须声明在“特效列表”-->

    <defs >
    <linearGradient id="g1" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="red"></stop>
      <stop offset="50%" stop-color="blue"></stop>
      <stop offset="100%" stop-color="green"></stop>
    </linearGradient>
  </defs>
  <rect width="200" height="200" x="50" y="50" fill="url(#g1)"></rect>

     滤镜：详细信息http://blog.csdn.net/chy555chy/article/details/53364310

    <defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
    • 注意：
    • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
    • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
    • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
    • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
    • in="SourceGraphic" 这个部分定义了由整个图像创建效果
  • 相关阅读:
    O(1)时间求出栈内元素最小值 小强斋
    图片的轮廓 小强斋
    png 图片的缩放 小强斋
    Dom4j 小强斋
    O(1)时间求出栈内元素最小值 小强斋
    图片的轮廓 小强斋
    png图片的读取 小强斋
    字符串的最大重复数 小强斋
    【Android】数据的四种存储方式
    【就业】签offer和签三方协议的不同
  • 原文地址：https://www.cnblogs.com/liangfc/p/7375539.html
Copyright © 2011-2022 走看看