首页 > 其他分享 >svg基础及示例

svg基础及示例

时间:2023-03-22 13:57:35浏览次数:44  
标签:obj 示例 -- svg 图像 基础 SVG 图形 蒲公英

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。

SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。

SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

    SVG 图像可通过文本编辑器来创建和修改;

    SVG 图像可被搜索、索引、脚本化或压缩;SVG 是可伸缩的;SVG 图像可在任何的分辨率下被高质量地打印;

    SVG 可在图像质量不下降的情况下被放大

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      svg {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <!-- 基本形状 -->
    <svg width="200" height="150">
      <!-- 矩形 - rect元素属性:x:矩形左上角的坐标(用户坐标系)的x值。y:矩形左上角的坐标(用户坐标系)的y值。width:矩形宽度。height:矩形高度。 -->
      <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" />
      <!-- 矩形 - rx:实现圆角效果时,圆角沿x轴的半径。ry:实现圆角效果时,圆角沿y轴的半径。 -->
      <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" />
      <!-- 圆 - circle元素:r:圆的半径。cx:圆心坐标x值。cy:圆心坐标y值。 -->
      <circle cx="125" cy="25" r="15" stroke="red" fill="transparent" stroke-width="2" />
      <!-- 椭圆 - ellipse元素:rx:半长轴(x半径)。ry:半短轴(y半径)。cx:圆心坐标x值。cy:圆心坐标y值。 -->
      <ellipse cx="170" cy="25" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="2" />
      <!-- 直线 - line元素:x1:起点x坐标。y1:起点y坐标。x2:终点x坐标。y2:终点y坐标。 -->
      <line x1="10" x2="40" y1="50" y2="80" stroke="orange" fill="transparent" stroke-width="2" />
      <!-- 折线 - polyline元素:points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值 -->
      <polyline points="50,50 50,60 60,60 60,70 70,70 70,80" stroke="orange" fill="transparent" stroke-width="2" />
      <!-- 多边形 - polygon元素:points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。 -->
      <polygon points="220,100 300,210 170,250" stroke="green" fill="transparent" stroke-width="2" />
      <!-- path元素的d属性,代表路径数据。在d的值中,M代表移至(Move to),L代表划线至(Line to),Q代表二次贝塞尔曲线,T代表没有控制点的二次贝塞尔曲线
        ,C代表三次贝塞尔曲线,S代表省略第一个控制点的三次贝塞尔曲线,H代表水平划线,V代表垂直划线,A代表绘制圆弧,Z代表闭合路径。 
        以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。-->
      <path d="M20,130 Q40,105 50,130 T90,130" fill="none" stroke="blue" stroke-width="2" />
    </svg>

    <!-- <g>元素代表“组”,组内的元素作为一个整体。如果为组添加了变换属性,那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。 -->
    <svg width="200" height="150">
      <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
        <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
      </g>
    </svg>
    <!-- SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。 -->
    <svg width="200" height="150">
      <defs>
        <g id="ShapeGroup">
          <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
          <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
        </g>
      </defs>
      <use xlink:href="#ShapeGroup" transform="translate(60,0) rotate(90) scale(0.4)"></use>
      <use xlink:href="#ShapeGroup" transform="translate(80,30) rotate(0) scale(0.75)"></use>
      <use xlink:href="#ShapeGroup" transform="translate(20,60) rotate(39) scale(0.25)"></use>
    </svg>
    <!-- 图案和渐变 -->
    <svg width="200" height="150">
      <defs>
        <!-- 图案填充 patternUnits值默认为objextBoundingBox,指pattern大小是占所填充图形的大小 -->
        <pattern id="RectPattern" width=".2" height=".2">
          <rect x="0" y="0" width="5" height="5" stroke="black" fill="green" stroke-width="1" />
        </pattern>
        <pattern id="TrianglePattern" width="10" height="10" patternUnits="userSpaceOnUse">
          <polygon points="5,0 10,10 0,10" />
        </pattern>
        <!-- linearGradient元素 - 定义线性渐变,x1,y1,x2,y2属性定义了渐变的方向,默认不写的话是水平渐变 -->
        <linearGradient id="LineGradient" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stop-color="#000"></stop>
          <stop offset="100%" stop-color="#f00"></stop>
        </linearGradient>
        <!-- radialGradient - 定义径向渐变,cx,cy,r属性定义了径向渐变的圆心和半径 ,fx,fy属性定义颜色中心处的位置-->
        <radialGradient id="RadialGradient" cx="0.5" cy="0.5" r="1" fx="0.75" fy="0.75">
          <stop offset="0%" stop-color="red" />
          <stop offset="100%" stop-color="blue" />
        </radialGradient>
      </defs>
      <rect x="5" y="5" width="90" height="60" stroke="red" fill="url(#LineGradient)" />
      <rect x="100" y="5" width="90" height="60" stroke="red" fill="url(#RadialGradient)" />
      <rect x="5" y="70" width="90" height="60" stroke="red" fill="url(#RectPattern)" />
      <rect x="100" y="70" width="90" height="60" stroke="red" fill="url(#TrianglePattern)" />
    </svg>

    <!-- SVG文本 -->
    <svg width="300" height="150">
      <!-- 文本元素text text-anchor设置水平对齐的方式,start、middle、end。默认值是start。-->
      <text x="10" y="20" stroke="#00f" fill="#00f" font-size="20px" font-weight="bold">
        你好,SVG
        <!-- 文本区间 - tspan元素,它用于渲染一个区间内的文本;它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。rotate用于设置字体的旋转角度,x、y用于设置包含的文本的绝对坐标值 -->
        <tspan font-weight="bold" fill="red">今天是个好天气</tspan>
      </text>
      <text x="10" y="70" stroke="#00f" fill="#00f" font-size="13px" font-weight="bold">
        <!-- 文本路径 - textPath元素:xlink:href属性获取指定的路径并把文本对齐到这个路径上,艺术字效果 -->
        <textPath xlink:href="#my_path">今天是个好天气</textPath>
      </text>
      <path d="M20,50 Q40,25 50,50 T90,50" id="my_path" fill="none" stroke="blue" stroke-width="5" />
    </svg>

    <!-- SVG图片 -->
    <svg width="200px" height="150px">
      <image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" />
    </svg>

    <!-- SVG滤镜 -->
    <svg width="200px" height="150px">
      <defs>
        <!-- <filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜
           <filter> 标签必须嵌套在 <defs> 标签内。 -->
        <filter id="Gaussian_Blur">
          <!-- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度,in="SourceGraphic" 这个部分定义了由整个图像创建效果 -->
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
      </defs>
      <image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" filter="url(#Gaussian_Blur)" />
    </svg>

    <!-- SVG动画实例 
    attributeName表示要变化的元素属性名称
    attributeType支持三个固定参数:CSS、XML、auto,用来表明attributeName属性值的列表。x、y以及transform属于XML;opacity等CSS属于CSS;auto为默认值
    from  动画的起始值
    to  指定动画的结束值
    by 动画的相对变化值
    values  用分号分隔的一个或多个值,可以看成是动画的多个关键值点
    begin 指动画开始的时间 beigin="3s;6s"表示的是3s之后动画走一下,6s时候动画再走一下 
                          begin=[元素的id].begin/end +/- 时间值 表示其它动画begin或者end之前或者之后动画开始,可以实现两个独立元素的动画级联效果。
                          begin=[元素的id].[事件类型] +/- 时间值 表示事件触发之后动画开始
                          begin=[元素的id].repeat(整数) +/- 时间值 指其它动画重复N次之后动画开始
                          begin="indefinite",表示“无限等待”。
    dur属性值只有两种:常规时间值 | "indefinite"   "indefinite"指动画不执行
    calcMode, keyTimes, keySplines  控制动画曲线   calcMode属性支持4个值:discrete | linear | paced | spline
    repeatCount表示动画执行次数 
  repeatDur定义重复动画的总时间 
    fill表示动画间隙的填充方式。支持参数有:freeze | remove。其中remove是默认值,表示动画结束直接回到开始的地方。freeze 表示动画结束后元素保持了动画时的状态   
    accumulate 累积 支持参数有:none | sum。默认值是none, sum表示动画结束时候的位置作为下次动画的起始位置
  additive控制动画是否附加。支持参数有:replace | sum。默认值是replace ,sum表示动画会附加到其他低优先级的动画上
    内置的API:svg.pauseAnimations()暂停和svg.unpauseAnimations()启动动画
   -->
    <svg width="200px" height="150px">
      <text font-size="20" y="30" x="0">
        蒲公英
        <set attributeName="x" attributeType="XML" to="60" begin="2s" />
      </text>
      <text font-size="20" y="60" x="0">
        蒲公英
        <animate attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="90" x="0">
        蒲公英
        <!-- <animateTransform>用于实现transform变换动画效果 -->
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.2" begin="0s" dur="2s" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="120" x="0">
        蒲公英
        <!-- <animateMotion>可以让SVG各种图形沿着特定的path路径运动 -->
        <animateMotion path="M 0 0 H 30 V 30 Z" begin="0s" dur="3s" repeatCount="indefinite" />
      </text>
    </svg>
    <svg width="200px" height="150px">
      <text font-size="20" y="30" x="0">
        蒲公英
        <animate attributeName="x" values="0;50;0;70;0" dur="2s" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="60" x="0">
        蒲公英
        <animate id="x1" attributeName="x" to="70" dur="2" fill="freeze" />
        <animate attributeName="y" begin="x1.end" to="80" dur="2" fill="freeze" />
      </text>
      <g>
        <circle id="circle" cx="10" cy="85" r="10" />
        <text font-size="20" y="90" x="30">
          蒲公英
          <animate id="x2" attributeName="x" begin="circle.click" to="70" dur="2" />
        </text>
      </g>
      <text font-size="20" y="120" x="0">
        蒲公英
        <animate id="x3" attributeName="x" to="70" dur="2" repeatCount="3" />
        <animate attributeName="y" begin="x3.repeat(2)" to="150" dur="2" fill="freeze" />
      </text>
    </svg>
    <svg width="200px" height="150px" onclick="func(this)">
      <g>
        <text font-size="20" y="30" x="50">
          蒲公英
          <animate id="animate1" attributeName="x" begin="indefinite" to="70" dur="1" repeatCount="indefinite" />
        </text>
        <a xlink:href="#animate1">
          <text y="30" fill="#cd0000" font-size="20">点击</text>
        </a>
      </g>
      <text font-size="20" y="60" x="0">
        蒲公英
        <animate attributeName="x" dur="3" values="40;60;80;100" calcMode="discrete" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="90" x="0">
        蒲公英
        <animate attributeName="x" dur="3" values="40;60;80;100" calcMode="paced" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="120" x="0">
        蒲公英
        <animate attributeName="x" dur="3" values="40;60;100" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" repeatCount="indefinite" />
      </text>
    </svg>
    <script>
      function func(this_obj) {
        if (!this_obj.paused) {
          this_obj.paused = true;
          this_obj.pauseAnimations();
        } else {
          this_obj.paused = false;
          this_obj.unpauseAnimations();
        }
      }
    </script>
    <svg xmlns="http://www.w3.org/2000/svg" width="400px" height="150px" version="1.1">
      <rect id="rec" x="300" y="100" width="300" height="100" style="fill: lime">
        <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
        <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
        <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="400" />
        <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="150" />
        <animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
      </rect>
      <g transform="translate(50,50)">
        <text id="TextElement" x="0" y="0" style="font-size: 24; visibility: hidden">
          It's SVG!
          <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="5s" fill="freeze" />
          <animateMotion path="M 0 0 L 100 50" begin="1s" dur="5s" fill="freeze" />
          <animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" begin="1s" dur="5s" fill="freeze" />
        </text>
      </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" version="1.1">
      <rect x="0" y="0" width="200" height="150" style="fill: blue">
        <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
      </rect>
    </svg>

    <!-- 超链接 -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="150" version="1.1">
      <a xlink:href="http://www.w3schools.com" target="_blank">
        <rect x="0" y="0" width="200" height="150" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.9" />
      </a>
    </svg>
  </body>
</html>

 

标签:obj,示例,--,svg,图像,基础,SVG,图形,蒲公英
From: https://www.cnblogs.com/caroline2016/p/17243445.html

相关文章

  • Java基础语法2
    顺序结构程序从上到下依次地执行,中间没有任何判断和跳转。System.out.println("程序开始");System.out.println("起床");System.out.print......
  • MySQL基础:约束
    MySQL基础:约束概述概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。目的:保证数据库中的数据的正确、有效和完整性。分类:约束描述关键字非空......
  • Web前端入门之JS基础知识梳理汇总
    Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错。不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业。不过,学习要一步一个......
  • 一统天下 flutter - 动画: Animation - 动画基础(以直线型动画为例)
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-动画:Animation-动画基础(以直线型动画为例)示例如下:lib\animation\a......
  • 一统天下 flutter - UI: 主题基础
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-UI:主题基础示例如下:lib\ui\theme.dart/**主题基础*/import......
  • 一统天下 flutter - 路由和导航: 路由和导航的基础
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-路由和导航:路由和导航的基础示例如下:lib\route\navigator.dart/*......
  • 100道python基础题——(1-15总结)
    1.lisi操作①列表更新list[index]②增加元素list.append(element):append是加一个列表的值,列表可以加数字,字符串,列表,元组等list.extend(element):extend是解析一个列......
  • Node-RED简介与Windows上安装、启动和运行示例
    场景Node-RED简介Node-RED是IBM公司开发的一个可视化的编程工具,以满足他们快速连接硬件和设备到Web服务和其他软件的需求,很快发展成为一种通用的物联网编程工具。Node-RED是......
  • android Vibrator使用示例
    使用Vibrator的vibrate()可调节震动时间;cancel()取消震动。<!—震动权限--><uses-permissionandroid:name="android.permission.VIBRATE"/>//振动器实例化privateVibrato......
  • 前端切图之svg图标的复用基于defs和use 亲测有用
    切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合、更好......