[TOC] ## `<svg>` - SVG 图像默认大小是300像素（宽） x 150像素（高） 属性 ``` width height viewBox 视图 横坐标,纵坐标,视口宽度,视口高度 ``` 例: ``` <svg width="100%" height="100%"></svg> //or <svg width="350" height="160"></svg> // viewbox <svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg> ``` ## `<circle>` 属性 ``` cx,cy 横坐标、纵坐标 r 半径 ``` CSS 属性 ``` fill：填充色 stroke：描边色 stroke-width：边框宽度 ``` ## `<line>` 属性 ``` x1,y1 起始点坐标 x2,y2 终点坐标 ``` css 属性 ``` stroke：描边色 stroke-width：边框宽度 ``` ## `<polyline>` 折现 属性 ``` points 两个一组, 表示一个点 ``` css 属性 ``` fill：填充色 stroke：描边色 stroke-width：边框宽度 ``` 示例 ``` <polyline points="3,3 30,28 3,53" fill="none" stroke="black" /> ``` ## `<rect>` 矩形 属性 ``` x,y 起始点 width,height 宽高 ``` CSS 属性 ``` fill：填充色 stroke：描边色 stroke-width：边框宽度 ``` ## `<polygon>` 多边型 属性 ``` points 两个一组, 表示一个点 ``` css 属性 ``` fill：填充色 stroke：描边色 stroke-width：边框宽度 ``` ## `<text>` ``` x,y 文本基线坐标 ``` 示例 ``` <text x="50" y="25">Hello World</text> ``` ## `<use>` 属性 ``` href 要复制的id x,y use 的左上角坐标 width,height 宽高坐标 ``` 示例 ``` <circle id="myCircle" cx="5" cy="5" r="4"/> <use href="#myCircle" x="10" y="0" style="fill: blue"/> <use href="#myCircle" x="20" y="0" style="fill: white;stroke: blue" /> ``` ## `<path>` 属性 ``` d M：移动到（moveto） L：画直线到（lineto） Z：闭合路径 ``` 示例 ``` <path d=" M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z "></path> ``` ## `<g>` 封装成组 封装成组,方便被 use 复用 示例 ``` <g id="myCircle"> <text x="25" y="20">圆形</text> <circle cx="50" cy="50" r="20"/> </g> <use href="#myCircle" x="100" y="0" fill="blue" /> <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" /> ``` ## `<defs>` 定义,仅供应用 示例 ``` <defs> <g id="myCircle"> <text x="25" y="20">圆形</text> <circle cx="50" cy="50" r="20"/> </g> </defs> <use href="#myCircle" x="0" y="0" /> <use href="#myCircle" x="100" y="0" fill="blue" /> <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" /> ``` ## `<pattern>` 示例: 把圆填重复充进矩形中, ``` <svg width="500" height="500"> <defs> <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="50" cy="50" r="35" /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" /> </svg> ``` ## `<image>` 属性 ``` href 图片路径 ``` 示例 ``` <image xlink:href="path/to/image.jpg" width="50%" height="50%"/> ``` ## `<animate>` 属性 ``` attributeName：发生动画效果的属性名。 如 x,y,with,height，opacity 等 from：单次动画的初始值。 to：单次动画的结束值。 dur：单次动画的持续时间。 repeatCount：动画的循环模式。 ``` 可以在多个属性上定义 示例 ``` <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> ``` 多个属性 ``` <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="y" from="0" to="300" dur="2s" repeatCount="indefinite" /> </rect> ``` ## `<animateTransform>` 变形 `<animate>`标签对 CSS 的`transform`属性不起作用，如果需要变形，就要使用`<animateTransform>`标签 属性 ``` attributeName 一般为 transform type 类型如 scale | rotate | skewX | skewY begin 多久之后开始运动 dur 周期 from to repeatCount ``` 示例: 旋转角度 ``` <rect x="250" y="250" width="50" height="50" fill="#4bc0c8"> <animateTransform attributeName="transform" type="rotate" begin="5s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" /> </rect> ``` `from="0 200 200"` 表示角度为0,从,200,200 开始旋转,`to="360 400 400"`表示结束时，角度为360，围绕(400, 400)旋转,当然也可以改成`to=360 200 200` 示例:放大 ``` <rect x="0" y="0" width="50" height="50" fill="#4bc0c8"> <animateTransform attributeName="transform" type="scale" begin="0s" dur="2s" from="1" to="2" fill="freeze" repeatCount="indefinite" /> </rect> ``` `form=1,to=2` 的意思为从1倍放大到两倍 `from="1 1" to="1 2"`意思为x坐标不放大,y坐标从1倍放大到两倍 ## JavaScript 操作 ``` <style> rect{ fill: #0a2b1d; } </style> <svg width="500px" height="500px"> <rect x="0" y="0" width="50" height="50" fill="#4bc0c8"> </rect> </svg> // js <script> let e = document.getElementById("demo"); e?.addEventListener("click",()=>{ e.setAttribute("width","100") },false) </script> ```