svg
关注
分享
扫一扫
那是遇知吧
Life is but a walking shadow
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
svg之好看的loading（part1）
今天來總結下好看的svg的loading1：效果圖代碼如下：<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" fill="#2196F3" preserveAspectRatio="none"> <path opacity=".8" d="M2 14v4h4v-4z"> ...原创 2019-04-19 15:07:24 · 515 阅读 · 0 评论 -
練習30天SVG之基礎開篇rect標籤（part1）
簡要：SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。 version 属性可定义所使用的 SVG 版本。 xmlns 属性可定义 SVG 命名空间。 width 和 height 属性可设置此 SVG 文档的宽度和高度。SVG 形状：矩形 <rect> 圆形 <circle>...原创 2019-04-30 15:44:34 · 288 阅读 · 0 评论 -
練習30天SVG之基礎開篇circle標籤（part2）
<circle> 标签定義：标签可用来创建一个圆。栗子：<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg"> <rect width="250" height="250" rx="30" ry="30" ...原创 2019-04-30 16:09:07 · 296 阅读 · 0 评论 -
練習30天SVG之基礎開篇ellipse標籤（part3）
<ellipse> 标签定義：可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。栗子：<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="210" c...原创 2019-04-30 17:08:16 · 133 阅读 · 0 评论 -
練習30天SVG之波浪效果（part7）
用SVG波形矢量图作为背景，畫一個波浪，並讓他hover時動起來。代碼如下：CSS a { text-decoration: none; } .svg-wave { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/...原创 2019-05-14 10:43:10 · 196 阅读 · 0 评论 -
練習30天SVG之基礎開篇line標籤（part4）
<line>標籤定義：用来创建一个直线x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="20...原创 2019-05-07 16:04:01 · 115 阅读 · 0 评论 -
練習30天SVG之基礎開篇polygon標籤（part5）
SVG 多边形 - <polygon>定義：用来创建含有不少于三个边的图形。屬性屬性名稱 屬性說明 points 每一個座標位置，x1,y1 x2,y2, x3,y3... transform 多邊形的變形效果，類似 css 中的 transform fill-rule有效值: nonzero | evenodd |inheri...原创 2019-05-07 16:37:22 · 250 阅读 · 0 评论 -
練習30天SVG之基礎開篇path標籤（part6）
<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 ...原创 2019-05-07 17:29:41 · 127 阅读 · 0 评论