svg的基本使用

最新推荐文章于 2024-12-10 22:30:08 发布

一杯充满泡泡的可乐

最新推荐文章于 2024-12-10 22:30:08 发布

阅读量349

点赞数

分类专栏： git 文章标签： svg html5

本文链接：https://blog.youkuaiyun.com/weixin_45781661/article/details/106326677

版权

git 专栏收录该内容

4 篇文章

订阅专栏

svg的基本使用

defs：被引用元素的容器 – 这很好理解相当于vue中的component
g： group缩写无实意。相关元素整合的容器 < id作为该的唯一标识 >

<defs>
   <filter id="f1" x="0" y="0">
     <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
   </filter>
 </defs>

1、矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>
//-----------------------------------------------------------
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
fill：指的是填充的颜色
stroke：指边框的颜色
stroke-width:边框的宽度
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
rx 和 ry 属性可使矩形产生圆角。

2、圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径
stroke：指边框的颜色
stroke-width:边框的宽度
filll:指填充的颜色

3、椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

4、直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

5、多边形

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

points 属性定义多边形每个角的 x 和 y 坐标
fill-rule:属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）

6、曲线

 <svg>
      <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:1" />
</svg>

7、路径

<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />

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 ：关闭绘画路径

8、文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
   <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>

9、svg的属性值

stroke-linecap ：属性定义不同类型的开放路径的终结，比如说线的结尾或开头是圆的，方的
stroke- width属性定义了一条线，文本或元素轮廓厚度
stroke属性定义一条线，文本或元素轮廓颜色
strokedasharray属性用于创建虚线
- <path stroke-dasharray="5,5" d="M5 20 l215 0" />

10、滤镜

10-1、高斯模糊

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

defs：被引用元素的容器 – 这很好理解相当于vue中的component
<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

10-2、阴影

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

偏移图像加阴影
<feOffset>元素是用于创建阴影效果
<filter>元素id属性定义一个滤镜的唯一名称
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

10-3、线性渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>