SVG基础指令，从此文开始

最新推荐文章于 2024-05-01 22:50:22 发布

劳动最光荣~

最新推荐文章于 2024-05-01 22:50:22 发布

阅读量805

点赞数

分类专栏： html5 文章标签： svg html5 canvas svg基础 html5绘图

本文链接：https://blog.csdn.net/qq_43538596/article/details/110864317

版权

跟canvas对比：
svg绘制的每一个图形元素都是独立的DOM节点，能够方便的绑定事件用来修改。canvas采用位图，是基于像素的操作，输出的是一整个画布。

svg是基于适量图形进行绘制的，后期可以修改参数自由放大缩小，不会产生锯齿。canvas因为是位图会导致失真。

下面会直接以代码+注释解释的方式学习svg：
演示结果如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #wrap {
    
      width: 100%;
      height: 1000px;
    }
  </style>
</head>
<body>

    <svg id="wrap">
      <!-- 
        x/y : 绘制的位置
        w/h : 绘制的宽高
        rx/ry: 圆角半径
        fill: 填充颜色
        stroke/stroke-width: 边框颜色/边框宽度
        fill-opacity和opacity的区别:
          前者只包含填充色的透明度
          后者包含fill和stroke的透明度
      -->
      <rect x="100" y="100" fill="#fea" stroke="#aef" stroke-width=

最低0.47元/天解锁文章

劳动最光荣~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
SVG基础指令，从此文开始

跟canvas对比：svg绘制的每一个图形元素都是独立的DOM节点，能够方便的绑定事件用来修改。canvas采用位图，是基于像素的操作，输出的是一整个画布。svg是基于适量图形进行绘制的，后期可以修改参数自由放大缩小，不会产生锯齿。canvas因为是位图会导致失真。下面会直接以代码+注释解释的方式学习svg：演示结果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录