博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
svg教程
阅读量:4362 次
发布时间:2019-06-07

本文共 793 字,大约阅读时间需要 2 分钟。

实例

My first SVG

  • (cx, cy):圆心坐标

  • stroke和stroke-width:控制如何绘制轮廓

在HTML中,embed,object

使用embed标签

使用object标签

使用iframe标签

直接嵌入svg标签

矩形

style/属性

  • fill 填充颜色

  • strok-width 轮廓宽度

  • stroke 轮廓颜色

  • fill-opacity: 填充颜色的不透明度

  • stroke-opacity:轮廓颜色不透明度

  • opacity:整个元素的不透明度

  • width

  • height

  • rx,ry :产生圆角

  • x,y:坐标原点,偏移

圆形

style/属性

  • cx,cy:圆心
  • r:半径

椭圆

style/属性

  • cx,cy:椭圆圆心
  • rx,ry:半径

直线

多边形

  • fill-rule:nonzero:

折线

路径- path

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve 方贝塞尔曲线
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

转载于:https://www.cnblogs.com/zhuxiang1633/p/11542321.html

你可能感兴趣的文章
Visual Studio 2017 设置透明背景图
查看>>
PHP的几种排序方法
查看>>
H5项目开发分享——用Canvas合成文字
查看>>
java发送邮件 发送带附件的邮件
查看>>
Linux tar 解压缩命令
查看>>
浅谈递归算法
查看>>
PDM只显示表名称不显示列表名称
查看>>
转 Java输入输出流详解(非常详尽)
查看>>
【面试】如果你这样回答“什么是线程安全”,面试官都会对你刮目相看
查看>>
OpenSSL.Net使用随记(二)
查看>>
常用正则表达式详解,持续更新
查看>>
2018中国大学生程序设计竞赛 - 网络选拔赛-A Buy and Resell (思维 贪心)
查看>>
个人博客第二天
查看>>
Leetcode 31. Next Permutation
查看>>
JPA学习
查看>>
【APS.NET Core】- Razor Page
查看>>
【Docker 命令】- inspect命令
查看>>
python IDE-pycharm在virtualenv里安装软件
查看>>
idea中不重启服务器更改代码(使用jrebel)
查看>>
分页式存储管理及地址转换(网易笔试题)
查看>>