<!DOCTYPE html>
<html>
<body>
<!-- 矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path> -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度(合法的范围是:0 - 1)
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
rx 和 ry 属性可使矩形产生圆角。
-->
<rect width="300" height="100" rx="50" ry="20"
style="fill:green; stroke-width:1px;stroke:blue; fill-opacity:0.5;stroke-opacity:0.9"/>
</svg>
<br>
<svg>
<!-- cx cy 为0 圆心从(0,0)点开始 -->
<circle cx="100" cy="50" r="50" style="fill:blueviolet; stroke:chocolate;stroke-width:3px"/>
</svg>
<br>
<svg>
<ellipse cx="100" cy ="80" rx="100" ry="50" style="stroke: crimson;stroke-width:2px;fill:blue"/>
<line x1="0" y1="80" x2="200" y2="80" style="stroke:darkgoldenrod;stroke-width:10" />
<!-- x1 x2 横轴开始结束 y1 y2 纵轴开始结束 -->
</svg>
<br>
<svg style="border: solid 1px; width:500px;height:500px">
<!-- points 属性定义多边形每个角的 x 和 y 坐标 例如 x,y -->
<!-- 上1 下1 中2 中1 下2 -->
<polygon points="150,150 100,380 250,240 50,240 200,380"
style="fill:lime;stroke:purple;stroke-width:1">
</svg>
<br>
<svg style="border: solid 1px; width:500px;height:500px">
<polyline points="20,20 20,40 60,40 60,80 100,80" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
<br>
<!-- 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 -->
<!-- 所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
<br>
<!-- 初始点为参考 计算下一个点的位置 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450" >
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
<path id="line" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#line">I love SVG I love SVG</textPath>
</text>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450" >
<g>
<text x="0" y="10" fill="green">b</text>
<text x="10" y="10" fill="black">I love SVG</text>
</g>
<text x="0" y="25" fill="red">b</text>
<line x1="0" y1="80" x2="200" y2="80" style="stroke:darkgoldenrod;stroke-width:1" />
<text x="20" y="85" fill="red" transform="rotate(20 20,40)">I love SVG</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450" >
<g fill="none">
<!-- stroke-linecap butt round(两头变成圆弧状) square(加长) stroke-linecap 属性制定了,在开放子路径被设置描边的情况下,用于开放自路径两端的形状。
stroke-dasharray -->
<path stroke="red" d="M5 20 l215 0" />
<!-- L = lineto 划线 绝对定位-->
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
<path stroke="black" d="M5 80 l215 0" />
<g stroke="red" stroke-width="6" fill="red" >
<path stroke-linecap="butt" d="M5 100 l215 0"/>
<path stroke-linecap="round" d="M5 120 l215 0"/>
<path stroke-linecap="square" d="M5 140 l215 0"/>
</g>
<g stroke="black" stroke-width="5">
<path stroke-dasharray="1,1" d="M5 160 l215 0"/>
<path stroke-dasharray="2,2" d="M5 180 l215 0"/>
<path stroke-dasharray="20,10,5,5,5,10" d="M5 200 l215 0"/>
</g>
</g>
</svg>
</body>
</html>
Svg基础
于 2023-05-12 14:18:34 首次发布