SVG学习（三）

时间  2019-11-05
标签 svg 学习 繁體版
原文   原文链接

阅读目录css

一：在SVG中使用样式html

SVG容许咱们使用四种方式指定图形使用样式：内联样式、内部样式表、外部样式表及表现属性。在SVG中使用样式，咱们简单的来了解下便可。svg

1. 内联样式测试

<circle cx="20" cy="20" r="10" style="stroke:black;stroke-width:2;fill:blue;fill-opacity:0.6;"></circle>

如上就是内联样式，和咱们的css中其实就是同样的，简单的了解下概念就能够了。编码

2. 内部样式表spa

代码以下所示：3d

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <style type="text/css">
    <![CDATA[
      circle {
        stroke: black;
        stroke-width: 2;
        fill: blue;
        fill-opacity: 5 3;
      }
    ]]>
  </style>
  <circle cx="20" cy="20" r="10"></circle>
  <circle cx="40" cy="40" r="20"></circle>
</svg>

如上就是内部样式表了。code

3. 外部样式表xml

就是和咱们的css外链是一个样的，好比index.html代码以下：htm

<!DOCTYPE html>
<html>
<head>
  <title>svg</title>
  <meta charset="utf-8">
  <link href="./index.css" rel="stylesheet" />
</head>
<body>
  <svg
    style="border: 1px solid red;" 
    width="400" 
    height="200" 
    viewBox="0,0,400,200"
  >
    <circle cx="20" cy="20" r="10"></circle>
    <circle cx="40" cy="40" r="20"></circle>
  </svg>
</body>
</html>

4. 表现属性

咱们以前使用样式都是使用style的内联样式来编码的，以下就是内联样式来写的，以下代码：

<circle cx="20" cy="20" r="10" style="fill:red;stroke:black;stroke-width:2;"></circle>

可是咱们也能够把样式当作属性来编写，好比以下：

<circle cx="50" cy="40" r="20" fill="red" stroke="black" stroke-width="2"></circle>

如上就是对上面的效果是同样的，可是这样作也是很差的，由于它混合告终构和表现的分离，因此咱们这边也只是介绍及了解下有这种方法来作这件事，而且属性的优先级它是小于内联样式的优先级的，以下代码所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <circle cx="20" cy="20" r="10" style="fill:red;stroke:black;stroke-width:2;"></circle>
  <circle cx="50" cy="40" r="20" fill="red" stroke="black" stroke-width="2"></circle>
  <circle 
    cx="80" 
    cy="80" 
    r="20" 
    fill="red" 
    stroke="black" 
    stroke-width="2"
    style="fill:blue;stroke:red;stroke-width:2;"
  ></circle>
</svg>

效果以下所示：

如上咱们能够看到第三个 circle 标签，咱们给它定义了使用表现属性填充颜色为红色了，可是咱们使用了style标签订义了 颜色为蓝色，所以咱们上面能够看到 填充的颜色为蓝色。而且咱们的内联样式或外表样式表的优先级都比咱们的表现属性的优先级更高。

二：分组和引用对象

1. 理解 <g> 元素

<g> 元素的做用是：将其全部的子元素做为一个组合，固然它还有一个惟一的id做为名称，每一个组合它还能够拥有本身的<title>和<desc>来提供基于xml应用程序识别。它其实就是 'group' 的简写，用来分组的，它能把多个元素放在一个组里。以下代码所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <g id="man" style="fill:none;stroke: black;">
    <desc>我是来测试的</desc>
    <rect x="6" y="50" width="60" height="60"></rect>
    <polyline points="6 50, 36 9, 66 50"></polyline>
    <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
  </g>
</svg>

效果以下所示：

2. 理解 <use> 元素

<use>标记的做用是能从svg文档内部取出一个节点，克隆它，并把它克隆到其余的地方。如上咱们使用了 <g>标签绘了一个图形，如今咱们使用 <use>元素来克隆一份到其余的地方去，代码以下：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <g id="man" style="fill:none;stroke: black;">
    <desc>我是来测试的</desc>
    <rect x="6" y="50" width="60" height="60"></rect>
    <polyline points="6 50, 36 9, 66 50"></polyline>
    <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
  </g>
  <use xlink:href="#man" x="170" y="60"></use>
</svg>

效果以下所示：

3. 理解 <defs> 元素

svg的<defs>元素用于预约义一个元素使其可以在svg图像中重复使用，好比咱们能够将一些图形制做成一个组，而且使用defs元素来包裹它，而后咱们就能够在svg图像中将它当作简单图形来重复使用。

使用 <defs>元素相对于直接使用<g>和<use>元素的好处有：

1. 使用<use>元素复制该图形的时候，并不能改变该元素的样式，好比上面的代码，咱们不能给他添加其余的颜色：以下代码：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <g id="man" style="fill:none;stroke: black;">
    <desc>我是来测试的</desc>
    <rect x="6" y="50" width="60" height="60"></rect>
    <polyline points="6 50, 36 9, 66 50"></polyline>
    <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
  </g>
  <use xlink:href="#man" x="170" y="60" style="file:blue;"></use>
</svg>

如上代码，咱们使用use元素复制了一份g元素的内容，而后咱们给他填充颜色并无生效，效果仍是和上面是同样的。

以下代码使用方式以下：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <defs>
    <g id="man">
      <desc>我是来测试的</desc>
      <rect x="6" y="50" width="60" height="60"></rect>
      <polyline points="6 50, 36 9, 66 50"></polyline>
      <polyline points="36 110, 36 80, 50 80, 50 110"></polyline>
    </g>
  </defs>
  <use xlink:href="#man" x="70" y="20" style="fill:red;stroke: black;"></use>
  <use xlink:href="#man" x="170" y="60" style="fill:blue;stroke: white;"></use>
</svg>

效果以下图所示：

如上咱们能够看到，其实<defs> 真正的做用是 定义一组元素在页面上，可是使用defs元素包围后，该元素不会在页面上显示的，只有当咱们使用 <use>元素来复制的时候才会在页面上显示，而且咱们使用 <defs>元素包裹的<g>元素不要使用任何样式，等咱们真正使用<use>元素复制完成后再去定义本身想要的样式，也就是说咱们使用 <defs>定义了不少组模板，当咱们使用 <use>元素复制了该模板的时候才会在页面上真正显示出来。

4. 理解<symbol>元素

<symbol>元素提供了另外一种组合元素的方式，它和<g>元素不一样的是，<symbol>元素永远不会显示出来，所以咱们有时候能够不把它放在<defs>规范内部。<symbol>元素还能够指定viewBox和preserveAspectRatio属性，咱们经过给<use>元素添加width和height属性就可让symbol适配视口大小。

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <symbol id="circle">
    <circle cx="50" cy="50" r="30"></circle>
  </symbol>
  <use xlink:href="#circle" style="fill:red;"></use>
  <use xlink:href="#circle" style="fill:blue" x="50" y="100"></use>
</svg>

以下所示：

注意：咱们无论使用<defs>元素也好，仍是使用 <symbol>也好，咱们不能再他们内部使用样式的，不然的话咱们使用<use>元素是改变不了样式的，由于它们内部自身的样式优先级会更高，好比以下代码，它显示的仍是自己的样式的，好比黑色，以下代码所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <symbol id="circle">
    <circle cx="50" cy="50" r="30" style="fill:black;"></circle>
  </symbol>
  <use xlink:href="#circle" style="fill:red;"></use>
  <use xlink:href="#circle" style="fill:blue" x="50" y="100"></use>
</svg>

效果以下所示：

上面咱们也已经提到 <symbol>元素可以建立本身的视窗，所以它可以使用 viewBox和preserveAspectRatio属性了，以下代码所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <symbol id="symbol" viewBox="0 0 250 250">
    <rect x="10" y="10" width="100" height="100" />
  </symbol>
  <use id="ant"
   fill="red"
   xlink:href="#symbol" />
</svg>

效果以下所示：

5. 理解<image>元素

在svg中，咱们可使用<image>元素来包含一个完整的SVG或栅格文件，若是咱们包含的是一个svg文件的话，其视口会基于引用文件
的x, y, width 和 height 属性来创建。若是咱们包含的是一个栅格文件的话，它会被缩放至以适配该属性指定的矩形。

以下代码所示：

<svg
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <rect x="10" y="10" height="130" width="500" style="fill: #333333"/>
  <image x="20" y="20" width="150" height="46"
  xlink:href="http://img.htmleaf.com/1506/logo.png" />
</svg>

效果以下所示：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程