H5之SVG

作者: 机器猫的百宝袋 | 来源:发表于2015-09-02 14:52 被阅读1997次

HTML5新增API
SVG矢量图
H5之SVG
React Native ART
一、基础篇 svg之viewbox，preserveAspect
微信小程序06：svg的使用
微信小程序06：svg的使用
H5 svg与画布
H5中的SVG
H5里的svg

SVG:
1.是可伸缩矢量图形(Scalable vector Graphics)
2.用来定义用于网络的基于矢量的图形
3.使用XML格式定义图形
4.图像在放大或改变尺寸的情况下其图形质量不会有损失
5.是万维网联盟的标准

优势:
1.图像可通过文本编辑器来创建和修改
2.图像可被搜索、索引、脚本化火压缩
3.可伸缩
4.图像可再任何的分辨率下被高质量地打印
5.可再图像质量不下降的情况下被放大

SVG 参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/SVG

SVG元素参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element

SVG属性参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

SVG DOM API 参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
SVG.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--盒子的大小-->
    <svg viewBox="0 0 120 120" height="200" width="200" version="1.2">
        <!--圆 圆心坐标 及半径-->
        <circle cx="60" cy="60" r="50"></circle>
    </svg>
    <svg width="120" height="120"
         viewPort="0 0 120 120" version="1.1">
         <!--xmlns="http://www.w3.org/2000/svg">-->
        <ellipse cx="60" cy="60" rx="50" ry="25"/>
    </svg>

    <!--引入外部svg文件-->
    <iframe src="SVG.svg" width="400px" height="200px" frameborder="no"></iframe>
</body>
</html>

SVG.svg——外部资源

<?xml version="1.0"?>
<svg width="100%" height="100%" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red"/>

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="black" stroke-width="2" />
</svg>