svg简单的应用

时间 2019-12-10

标签 svg 简单应用繁體版

原文原文链接

一、能够直接在html内写svghtml

（1）width宽度，height高度svg

（2）xmlns svg的规则spa

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22"
></svg>

二、rect节点xml

（1）长方形htm

（2）x、y位置blog

（3）rx、ry圆大小ci

（4）fill填充颜色class

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<rect x="10" y="14" width="300" rx="7" ry="7" height="14" fill="#972716" />
</svg>

三、circle节点di

（1）圆形path

（2）cx、cy位置

（3）r圆直径

（4）fill填充颜色

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<circle cx="149" cy="11" r="11" fill="#972716" />
</svg>

四、path画线节点

（1）画线

（2）d画线的内容

　　一、M原点

　　二、Q弧线

　　三、L直线

　　四、Z闭合

（3）fill填充

（4）stroke描边

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<path 
    d="
    M 0 11 
    Q 0 4 7 4
    L 136.5 4
    Q 136.5 0 143 0
    Q 149.5 0 149.5 4
    L 200 4
    L 200 11
    Q 200 4 193 4 
    L 200 4
    L 200 18
    L 193 18
    Q 200 18 200 11
    L 200 18
    L 0 18
    Z
    " 
    stroke="black"
    fill="transparent"
  >
</svg>