铁路项目建设 网站企业网站前端建设

铁路项目建设 网站,企业网站前端建设,昌大建设三公司,越南网站怎么做一、SVG 概述 官方文档#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/SVGSVG 全称 Scalable Vector Graphics#xff0c;即可缩放矢量图形SVG 基于 XML 标记语言#xff0c;用于描述二维的矢量图形SVG 格式提供的是矢量图#xff0c;这意味着它的图像能够被无限…一、SVG 概述官方文档https://developer.mozilla.org/zh-CN/docs/Web/SVGSVG 全称 Scalable Vector Graphics即可缩放矢量图形SVG 基于 XML 标记语言用于描述二维的矢量图形SVG 格式提供的是矢量图这意味着它的图像能够被无限放大而不失真或降低质量并且可以方便地修改内容无需图形编辑器二、SVG 基本使用1、准备阶段准备一个宽 400 像素、高 300 像素的灰色边框的空白 SVG 画布svgidmySvgwidth400height300xmlnshttp://www.w3.org/2000/svg.../svgsvg{border:1px solid #ccc;}2、基础图形绘制矩形x, y 是左上角坐标fill 是填充色stroke 是描边色stroke-width 是描边粗细rectx50y50width100height60fillsteelbluestrokedarkbluestroke-width3/圆形cx, cy 是圆心坐标r 是半径fill 是填充色opacity 控制透明度0 ~ 1circlecx250cy100r40fillcoralopacity0.8/直线x1, y1 是起点坐标x2, y2 是终点坐标。stroke 是线条颜色stroke-width 是线条粗细linex150y1200x2150y2250strokegreenstroke-width5/多边形points 属性定义了一系列用空格分隔的 x,y 坐标对它会自动连接首尾点形成封闭图形polygonpoints300,200 350,250 250,250filllavenderstrokepurple/路径d 属性包含绘制命令上例中M移动到、L画线到、Z闭合路径pathdM 100,150 L 200,150 L 150,100 Zfilllightyellowstrokeorange/三、SVG 使用 CSSSVG 的 fill、stroke、opacity 等属性可以使用 CSS控制这有助于统一风格与交互效果svgidmySvgwidth400height300xmlnshttp://www.w3.org/2000/svgrectclassshapex50y50width100height60/circleclassshapecx250cy100r40//svgsvg{border:1px solid #ccc;}.shape{stroke-width:2;stroke-opacity:0.7;stroke:blue;fill:gray;transition:fill 0.3s ease;}.shape:hover{fill:gold;}四、SVG 使用 JavaScriptsvgidmySvgwidth400height300xmlnshttp://www.w3.org/2000/svgrectidmyRectclassshapex50y50width100height60//svgsvg{border:1px solid #ccc;}.shape{stroke-width:3;stroke-opacity:0.7;stroke:blue;}constmySvgdocument.getElementById(mySvg);constmyRectdocument.getElementById(myRect);// 生成一个随机颜色改变矩形的填充色myRect.addEventListener(click,function(){constrandomColor#Math.floor(Math.random()*16777215).toString(16);console.log(randomColor);this.setAttribute(fill,randomColor);});// 在 SVG 内部点击时添加圆形mySvg.addEventListener(click,function(event){constpointmySvg.createSVGPoint();point.xevent.clientX;point.yevent.clientY;constsvgPointpoint.matrixTransform(mySvg.getScreenCTM().inverse());constnewCircledocument.createElementNS(http://www.w3.org/2000/svg,circle);newCircle.setAttribute(cx,svgPoint.x);newCircle.setAttribute(cy,svgPoint.y);newCircle.setAttribute(r,15);newCircle.setAttribute(fill,lightcoral);newCircle.classList.add(shape);mySvg.appendChild(newCircle);});五、SVG 实例实操房屋绘制svgwidth400height400viewBox0 0 400 400!-- 房屋主体 --rectclasshouse-bodyx100y200width200height150rx5/!-- 屋顶 --polygonclassroofpoints70,200 330,200 200,100/!-- 烟囱 --rectclasschimneyx260y120width30height60/rectclasschimneyx255y115width40height10/!-- 烟囱烟 --pathdM275,90 Q280,70 290,65 Q300,60 310,55fillnonestroke#aaastroke-width3stroke-linecapround/pathdM280,80 Q285,60 295,55 Q305,50 315,45fillnonestroke#aaastroke-width3stroke-linecapround/!-- 窗户 --rectclasswindowx120y220width40height40rx3/rectclasswindowx240y220width40height40rx3/!-- 窗户十字架 --linex1140y1220x2140y2260stroke#3366ccstroke-width1/linex1120y1240x2160y2240stroke#3366ccstroke-width1/linex1260y1220x2260y2260stroke#3366ccstroke-width1/linex1240y1240x2280y2240stroke#3366ccstroke-width1/!-- 门 --rectclassdoorx180y280width40height70rx3/!-- 门把手 --circlecx210cy315r3fillgold/!-- 台阶 --rectx170y350width60height10fill#888rx2/!-- 文字 --textx200y390text-anchormiddlefont-size14fill#666SVG 房屋绘制/text/svgdivstyletext-align:center;margin:20pxbuttononclickaddSun()添加太阳/buttonbuttononclickchangeColor()改变颜色/buttonbuttononclickreset()重置/button/divsvg{border:1px solid #ddd;background-color:#f8f9fa;display:block;margin:20px auto;}.house-body{fill:#ffcc99;stroke:#cc9966;stroke-width:2;}.roof{fill:#cc3333;stroke:#993333;stroke-width:2;}.window{fill:#99ccff;stroke:#3366cc;stroke-width:1;}.window:hover{fill:#66aaff;}.door{fill:#996633;stroke:#663300;stroke-width:2;}.door:hover{fill:#cc9966;}.chimney{fill:#cccccc;stroke:#999999;stroke-width:2;}functionaddSun(){constsvgdocument.querySelector(svg);constsundocument.createElementNS(http://www.w3.org/2000/svg,circle);sun.setAttribute(cx,350);sun.setAttribute(cy,50);sun.setAttribute(r,30);sun.setAttribute(fill,gold);sun.setAttribute(opacity,0.8);svg.appendChild(sun);// 阳光光线for(leti0;i12;i){constraydocument.createElementNS(http://www.w3.org/2000/svg,line);constangle(i*30*Math.PI)/180;constx1350Math.cos(angle)*30;consty150Math.sin(angle)*30;constx2350Math.cos(angle)*45;consty250Math.sin(angle)*45;ray.setAttribute(x1,x1);ray.setAttribute(y1,y1);ray.setAttribute(x2,x2);ray.setAttribute(y2,y2);ray.setAttribute(stroke,gold);ray.setAttribute(stroke-width,3);svg.appendChild(ray);}}functionchangeColor(){constcolors[#ff9999,#99ff99,#9999ff,#ffff99,#ff99ff];consthouseBodydocument.querySelector(.house-body);constrandomColorcolors[Math.floor(Math.random()*colors.length)];houseBody.style.fillrandomColor;}functionreset(){location.reload();}