认识一下 SVG

栏目: 后端 · 前端 · 发布时间: 7年前

内容简介:认识一下 SVG

SVG,即可缩放矢量图形(Scalable Vector Graphics),它能够以 XML 格式的文本表示图形信息。

基本形状

  • 线段
<linex1="100"
      y1="100"
      x2="300"
      y2="300"
      stroke="green"
      stroke-width="2"/>
  • 矩形
<!-- 普通矩形 -->
<rectx="100"
      y="100"
      width="200"
      height="100"
      fill="red" />
<!-- 圆角矩形 -->
<rectx="100"
      y="100"
      width="200"
      height="100"
      rx="50"
      ry="50"
      fill="red" />
<circlecx="100"
        cy="100"
        r="50"
        fill="red" />
  • 椭圆
<ellipsecx="100"
         cy="100"
         rx="80"
         ry="40"
         fill="red" />
  • 多边形
<polygonpoints="15,10 55,44 100,22 100,44 55,55"
         fill="red" />
  • 折线
<polylinepoints="11,11 333,44 222,9 66,90"
          stroke="green"
          fill="none" />

其它 SVG 元素

  • <g> 元素,常用来组合元素,并且通常会为其分配一个 id 作为唯一名称
<gid="group1">
      <!--add some thing-->
</g>
  • <use> 元素,常用来复用一个通过 g 元素组合的对象
<usexlink:href="#group1"x="70"y="90"/>
  • <defs> 元素的作用是:将那些需要复用的组合对象放到其中,但是不会显示,只是进行定义
<defs>
    <gid="group1"></g>
    <gid="group2"></g>
    <gid="group3"></g>
</defs>

<usexlink:href="#group1"x="99"y="66"/>
<usexlink:href="#group3"x="11"y="6"/>
  • <image> 元素,用于引用外部的 svg 文件或栅格图形文件
<imagexlink:href="./test.jpg"
       x="100"
       y="100"
       height="100"
       width="200" />
  • <text> 元素为 SVG 引入文本
<textx="0"y="15"fill="red">I love SVG</text>
<!-- 为引入的文本添加超链接 -->
<axlink:href="https://www.w3schools.com/graphics/"target="_blank">
    <textx="0"y="15"fill="red">I love SVG!</text>
</a>
<!-- 为文本使用文本路径 -->
<defs>
     <pathid="myPath"
           d="M150 58 C6 40 123 321 130 118" />
</defs>

<textstyle="stroke:red">
  <textPathxlink:href="#myPath">
        asdsadasdasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </textPath>
</text>

坐标系统

  • svg 的 widthheight 属性用来声明当前 svg 文档视口的大小
<svgwidth="500"
   height="500"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

  <rectx="100"
        y="100"
        width="200"
        height="100" />

</svg>

一旦 svg 的视口大小被声明出来后, 最初的坐标系统用户坐标系统 也会同时被建立。默认情况下,这两个坐标系统是完全一样的,都是基于视口大小建立起来的。但是 在声明了 viewBox 属性 后,用户坐标系统将基于视口进行一定程度的缩放,以达到 viewBox 属性指定的效果。

而且实际上,用户坐标系统才是真正的坐标系统,所有的图形点的坐标都是基于这个用户坐标系统,而不是基于最初的坐标系统。

  • viewBox 属性: 为视口指定用户坐标系统
    • 有四个值:最小 x 坐标、最小 y 坐标、宽度、高度。
<svgwidth="500"
   height="500"
   viewBox="0 0 200 200"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
    <rectx="100"
          y="100"
          width="100"
          height="50" />
</svg>

上面 viewBox 的宽高比正好和视口的宽高比一样,那如果两者的比率不一样呢?如果比率不一样,viewBox 还是会基于视口进行一定程度的缩放,默认情况下它会使自己全部显示在视口中,并且在水平和垂直上都会居中,这是因为 preserveAspectRatio 的默认值就是 xMidYMid meet

  • preserveAspectRatio 属性: 用来指定被缩放的 viewBox 相对视口的对齐方式,以及是希望它适配边缘还是要裁剪。
preserveAspectRatio="xAlignmentYAlignment [meet | slice]"

xAlignment = [xMin | xMid | xMax]
yAlignment = [yMin | yMid | yMax]

preserveAspectRatio 还有一个值是 none ,设定了这个值后,viewBox 将不会被保持原来的比率进行缩放,结果是它被横向或纵向拉伸。

<svgwidth="500"
   height="500"
   viewBox="0 0 400 200"
   preserveAspectRatio="none"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
    <rectx="100"
          y="100"
          width="100"
          height="50" />
</svg>

坐标系统变换

当你为一个 svg 元素应用 transform 属性时,这个元素就会拷贝一个当前的坐标系统用来完成自己相应的变换。

  • SVG 中的变换变换的是拷贝后的坐标系统
    • translate(x, y): 移动坐标系统
    • scale(x, y): 缩放坐标系统
    • rotate(angle, centerX, centerY): 旋转坐标系统
    • skewX(angle): 倾斜 x 坐标轴
    • skewY(angle): 倾斜 y 坐标轴
<gid="rect">
  <rectx="100"
        y="100"
        width="200"
        height="100" />
</g>

<usexlink:href="#rect"
     x="0"
     y="0"
     transform="scale(0.5) translate(0,120)" />

路径

path 元素是一个更通用的用来表示图形的 svg 元素,我们前面提到的 所有的基本形状都可以通过 path 元素进行表示 ,但是为了让 svg 结构化以及增强可读性,建议尽可能地使用这些简写形式。

  • 所有描述轮廓的信息都放在 path 元素的 d(data 的简写)属性中
    • d 属性的值由一系列路径命令组成
    • 命令都由一个字母进行表示,并且大写字母后面跟绝对坐标,而小写字母后面跟相对坐标
    • 使用逗号或空格来分隔 x 和 y 坐标
### 路径命令

M   移动到给定坐标
L   绘制一条道给定坐标的直线
H   绘制一条到给定 x 坐标的水平直线
V   绘制一条到给定 y 坐标的水平直线
A   绘制一条椭圆弧
Q   绘制一条二次贝赛尔曲线
T   绘制一条光滑的二次贝赛尔曲线
C   绘制一条三次贝赛尔曲线
S   绘制一条光滑的三次贝赛尔曲线
Z   闭合路径,绘制一条终点到起点的直线
  • 书写更简洁的路径表示法的两条规则
    • 可以在 Ll 命令后放多组坐标
    • 所有不必要的空白都可以消除(命令字母与数字之间的空白可消除,正数和负数之间的空白也可消除)
<!-- 原始路径 -->
<pathd="M 100,100 L 200,200 L 100,300 Z"/>

<!-- 简洁的路径 -->
<pathd="M100,100L200,200 100,300Z"/>
  • 一个简单的动画

See the Pen simple-svg-animation by percy ( @percy507 ) on CodePen .

SVG 的 CSS 属性

line {
    stroke: green;   /* 笔画颜色 */
    stroke-width: 3;   /* 笔画宽度 */
    stroke-opacity: 0.5;   /* 笔画透明度 */

    /* 笔画效果,虚线、点线,它的值由一个或多个数字组成 */
    stroke-dasharray: 10, 20, 5, 15;

    /*
    指定线段的头尾形状,butt、round(圆的)、square(平的)
    round 和 square 的起止位置都超过了真实位置,默认值 butt 则精确地与起止位置对齐
     */
    stroke-linecap: round;

    /*
    指定线段在图形棱角处交叉时的效果
    miter(尖的)、round(圆的)、bevel(平的)
     */
    stroke-linejoin: round;
}

rect {
    fill: green;       /* 填充的颜色 */
    fill-opacity: 0.5; /* 填充颜色的透明度 */ 
}

其它的 CSS 属性用到了会再补充 ~

我上面有关坐标系统和坐标系统的变换讲的不太详细,大家可以看看下面的一系列文章,超级详细,并且配有可视化的图片,理解起来更容易。


以上所述就是小编给大家介绍的《认识一下 SVG》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

機器,平台,群眾

機器,平台,群眾

安德魯‧麥克費(Andrew McAfee)、艾瑞克‧布林優夫森(Erik Brynjolfsson) / 李芳齡 / 天下文化 / 2017-12-27 / TWD550

★★Amazon.com商業理財Top1 ★★ 全球暢銷書《第二次機器時代》作者最新力作 兩位MIT數位頂尖科學家歷時三年時間 走訪矽谷、華府、劍橋、紐約、倫敦、舊金山等科技政經重鎮 拜會許多領域精英進行交流,結合宏觀趨勢觀察, 指出人人都應關注的三重革命 科技正以空前速度改變每個產業及每個人的生活, 你該如何做,才能保持領先? 我們生活在一個奇特的......一起来看看 《機器,平台,群眾》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具