SVG - SVG元素 (二)Image image元素可以加载一张外部资源图片 image 元素没设置 x , y 值

Image

image元素可以加载一张外部资源图片

image 元素没设置 x , y 值，它们自动被设置为 0
image 元素没设置 height 、width 时，默认为图片大小
width 、height 等于 0，将不会呈现这个图像
需在 href 属性上引用外部的图像，不是src属性

<image href="./images/googlelogo_color_92x30dp.png" />

SVG V1.0写法

<svg
     version="1.0"
     baseProfile="full"
     width="400"
     height="400"
     viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     >
  <image xlink:href="./images/googlelogo_color_92x30dp.png"></image>
</svg>

SVG V2.0写法

<svg
     width="400"
     height="400"
     viewBox="0 0 400 400"
     >
  <image href="./images/googlelogo_color_92x30dp.png">
  </image>
</svg>

SVG 兼容性写法

<svg
     version="1.0"
     baseProfile="full"
     width="400"
     height="400"
     viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     >
  <!-- xlink:href 和 href 都写 目的是为了兼容 SVG V1.0 和 V2.0  -->
  <image
         xlink:href="./images/googlelogo_color_92x30dp.png"
         href="./images/googlelogo_color_92x30dp.png"
         >
  </image>
</svg>

缩放

<svg
   width="400"
   height="400"
   viewBox="0 0 400 400"
  >
  <!--
	图片会从(0, 0)开始的宽为100 高为100的矩形区域中进行绘图
	并将绘制完毕的图在这100 * 100的区域中 水平居中和垂直居中对齐
	-->
  <image
      width="100"
      height="100"
      href="./images/googlelogo_color_92x30dp.png"
   ></image>
</svg>

文字

text元素是用来在SVG画布中绘制文字

属性	说明	可选值
x, y	文本在用户坐标系中显示的位置
text-anchor	文本水平对齐方式	start、middle、end 或 inherit 值，默认值 start
dominant-baseline	基线对齐方式	auto 、middle 或 hanging 值, 默认值:auto auto的表现行为是基线位于文字的底部，即文字在基线上方显示
其余文字属性	类似于fill，font-size等属性使用和css中使用一致这类属性即可以作为css样式作用到svg元素上也可以作为svg属性进行使用

<style>
  text {
    fill: red;
  }
</style>
<body>
  <svg
       width="400"
       height="400"
       viewBox="0 0 400 400"
       >
    <text x="100" y="100" text-anchor="middle" dominant-baseline="middle" font-size="40">
      hello world
    </text>
  </svg>
</body>

tspan

tspan 元素用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素

也就是说text中某一部分文字字体需要单独样式操作的时候，就需要使用tspan

<text x="100" y="100" text-anchor="middle" dominant-baseline="middle" font-size="30">
  hello <tspan fill="red">world</tspan>
</text>

属性	说明
x, y	文本在用户坐标系中显示的位置
alignment-baseline	基线对⻬属性 auto 、baseline、middle、hanging、top、bottom ... ,默认是 auto

组合

g元素是用来组合元素的容器

添加到g元素上的变换会应用到其所有的子元素上
添加到g元素的属性大部分会被其所有的子元素继承
g元素也可以用来定义复杂的对象，之后可以通过use元素来引用它们
g元素上只能添加全局属性

<g fill="transparent" stroke="red">
  <circle cx="100" cy="100" r="50"></circle>
  <circle cx="170" cy="100" r="50"></circle>
  <circle cx="240" cy="100" r="50"></circle>
  <circle cx="310" cy="100" r="50"></circle>
</g>

svg的全局属性

核心属性:id
样式属性:class 、style
Presentation Attributes
- 即可以作为svg元素属性使用也可以作为css属性使用的属性
- display, fill, stroke，x, y, width, height ....
事件属性:onchange, onclick, ondblclick, ondrag...
动画属性:transform

复用

defs

可以把可复用的元素定义在defs元素里面，然后通过use元素来引用和显示

这样可以增加 SVG 内容的易读性、复用性和利于无障碍开发

defs中定义的元素参考的坐标系是用户坐标系

在defs元素中定义的元素默认是不会直接显示的

可在视口任意地方用use来呈现在defs中定义的元素

defs元素没有专有属性，使用时通常也不需添加任何属性

<svg
     width="400"
     height="400"
     viewBox="0 0 400 400"
     >
  <defs>
    <g id="logo" fill="transparent" stroke="red">
      <circle cx="100" cy="100" r="50"></circle>
      <circle cx="170" cy="100" r="50"></circle>
      <circle cx="240" cy="100" r="50"></circle>
      <circle cx="310" cy="100" r="50"></circle>
    </g>
  </defs>

  <use href="#logo"></use>
</svg>

use元素从 SVG 文档中获取节点，并将获取到的节点复制到指定的地方

use等同于深度克隆DOM节点，克隆到use元素所在的位置

<!--
	defs中定义的元素，是可以跨svg元素复用的
	所以一般会单独定义一个svg来定义这些需要复用的元素
	并且设置这个svg的display为none
-->
<svg
     width="400"
     height="400"
     viewBox="0 0 400 400"
     display="none"
     >
  <defs>
    <g id="logo" fill="transparent" stroke="red">
      <circle cx="100" cy="100" r="50"></circle>
      <circle cx="170" cy="100" r="50"></circle>
      <circle cx="240" cy="100" r="50"></circle>
      <circle cx="310" cy="100" r="50"></circle>
    </g>
  </defs>
</svg>
<svg
     width="400"
     height="400"
     viewBox="0 0 400 400"
     >
  <use href="#logo"></use>
</svg>

symbol

symbol元素和defs元素类似，也是用于定义可复用元素，然后通过use元素来引用显示

在symbol元素中定义的图形元素默认也是不会显示在界面上
symbol元素常⻅的应用场景是用来定义各种小图标，比如:icon、logo、徽章等

属性	说明
viewBox	symbol绘制时候使用的用户坐标系
x / y	symbol元素的 x / y坐标默认值:0
width / heigh	symbol元素的宽度默认值:0

<svg
   width="400"
   height="400"
   viewBox="0 0 400 400"
   display="none"
 >
  <symbol id="next" viewBox="0 0 100 100">
    <polygon points="50 0, 100 50, 50 100"></polygon>
  </symbol>

  <!-- 可以在symbol上指定preserveAspectRatio属性 来控制引用之后的缩放方式 -->
  <symbol id="preview" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon points="50 0, 0 50, 50 100"></polygon>
  </symbol>
</svg>

<svg
   width="400"
   height="400"
   viewBox="0 0 400 400"
 >
<!--
	symbol 定义的元素 也可以跨svg标签进行访问
	可以使用width和height属性来调整元素的宽高
	如果不设置默认会按照新的用户坐标系进行等比例缩放
-->
  <use href="#next" width="100" height="100"></use>
</svg>

<svg
   width="400"
   height="400"
   viewBox="0 0 400 400"
>
  <use href="#preview" = width="100" height="50"></use>
</svg>

symbol vs defs

defs元素没有专有属性，而symbol元素提供了更多的属性
- 比如:viewBox、preserveAspectRatio、x、y、width、height等
symbol元素有自己用户坐标系，可以用于制作SVG精灵图
symbol元素定义的图形增加了结构和语义性，提高文档的可访问性

本文正在参加「金石计划 . 瓜分6万现金大奖」