svg入门

最新推荐文章于 2022-03-26 13:37:14 发布

原创最新推荐文章于 2022-03-26 13:37:14 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

svg

1 篇文章

订阅专栏

基本形状

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <!-- 线 ：起点终点x1,y1,x2,y2)-->
  <span>线</span>
  <svg width="200" height="200">
    <line x1="10" y1="10" x2="190" y2="190" stroke="#2ed"></line>
  </svg>
  <!-- 折线 ：points表示每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔-->
  <br>
  <span>折线</span>
  <svg width="200" height="200">
    <polyline points="10, 10 100, 180, 180, 90, 10, 10" stroke="#2ed"></polyline>
  </svg>
  <!-- 圆： 圆心(cx, cy)，半径(r)-->
  <br>
  <span>圆</span>
  <svg width="200" height="200">
    <circle cx="50" cy="50" r="50" stroke="#2ed"></circle>
  </svg>
  <!-- 矩形 ：长width,宽height-->
  <br>
  <span>矩形</span>
  <svg width="200" height="200">
    <rect width="100" height="100" stroke="#2ed"></rect>
  </svg>
  <!-- 椭圆: 中心点(cx, cy),长短轴rx, ry -->
  <br>
  <span>椭圆</span>
  <svg width="200" height="200">
    <ellipse cx="100" , cy="100" rx="30" ry="50" stroke="#2ed"></ellipse>
  </svg>
  <!-- 多边形 -->
  <br>
  <span>多边形</span>
  <svg width="200" height="200">
    <polygon points="10, 10 100, 180, 180, 90, 10, 10" stroke="#2ed"></polygon>
  </svg>
  <!-- 路径 绘制顺序d="M 14,10 L 50, 50 L 50, 100 Z" 
      M：移动到（moveto）
      L：画直线到（lineto）
      Z：闭合路径-->
  <br>
  <span>路径</span>
  <svg width="200" height="200">
    <path d="M 14,10 L 50, 50 L 180, 100 Z" stroke="#2ed"></path>
  </svg>
  <!-- 文本 文字位置x, y， text标签之间是内容-->
  <br>
  <span>文本</span>
  <svg width="200" height="200">
    <text x="100" y="100">text文字内容</text>
  </svg>
  <!-- 分组g:把多个图形分成一组，以便复用 ，例如下面的use可以直接引用id为group的组-->
  <br>
  <span>分组</span>
  <svg width="200" height="200">
    <g id="group">
      <circle cx="60" cy="60" r="60" fill="#dd1"></circle>
      <text x="20" y="130">我是一个圆</text>
    </g>
  </svg>
  <!-- 引用：href的值为某个图形的id，记得加# ，例如引用上面的g-->
  <br>
  <span>引用分组的图形</span>
  <svg width="200" height="200">
    <use href="#group"></use>
  </svg>
  <!-- defs用于自定义形状，它内部的代码不会显示，仅供引用 -->
  <br>
  <span>自定义形状</span>
  <svg width="200" height="200">
    <defs>
      <g id="defgroup">
        <circle cx="60" cy="60" r="60" fill="#dd1"></circle>
        <text x="20" y="130">我是一个圆</text>
      </g>
    </defs>
    <use href="#defgroup"></use>
  </svg>
  <!-- 自定义图形 -->
  <br>
  <span>自定义图形</span>
  <svg width="200" height="200">
    <pattern id="rect" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect x="10" y="10" width="40" height="40" fill="blue"></rect>
    </pattern>
    <circle cx="50" cy="50" r="40" fill="url(#rect)" stroke="#12d"></circle>
  </svg>
  <!-- 动画: 作用属性attributeName，起点状态from，终点状态to， 过渡时间dur，重复次数repeatCount,可有多个animate,放在要作用的标签之间  -->
  <br>
  <span>动画</span>
  <svg width="200" height="200">
    <rect x="0" y="0" width="150" height="150" fill="#1df">
      <!-- <animate attributeName="x" from="0" to="50" dur="2" repeatCount="indefinite"></animate> -->
      <animate attributeName="width" from="0" to="150" dur="2" repeatCount="indefinite"></animate>
      <animate attributeName="fill" from="#f1f" to="#1df" dur="2" repeatCount="indefinite"></animate>
    </rect>
  </svg>
  <!-- 动画平移 ：因为css的transform对animate不起作用。因此如果要达到同样的效果，需要使用animateTranform,属性见例子-->
  <br>
  <svg width="200" height="200">
    <rect x="50" y="50" width="150" height="150">
      <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
    </rect>
  </svg>
  <!-- 图像 -->
  <br>
  <span>图像</span>
  <svg width="200" height="200">
    <image xlink:href="img.jpg" width="50%" height="50%"/>
  </svg>
</body>

</html>

js操作：如果svg是放在html里的，可以对svg进行dom操作

参考链接：

http://www.ruanyifeng.com/blog/2018/08/svg.html

https://d3js.org.cn/svg/get_start/#%E7%AC%AC%E4%B8%80%E7%AB%A0-%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97

https://www.jianshu.com/p/c819ae16d29b

http://www.softwhy.com/article-9743-1.html