html——svg 淩亂°似流年 2022-01-06 07:04 214阅读 0赞 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><!--文档的元数据，解决中文乱码--> <title>svg</title> <style type="text/css"> svg{ display: inline-block; } </style> </head> <body> <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"></circle><!--圆--> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="700px" height="100px" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect> </svg><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="200px" height="100px" style="fill:red;stroke-width:5;stroke:pink;fill-opacity:0.1;stroke-opacity:0.9"></rect><!--opacity数值越小越透明--> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="200px" height="100px" style="fill:red;stroke-width:5;stroke:pink;fill-opacity:0.1;stroke-opacity:0.9"></rect><!--opacity数值越小越透明--> </svg><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="150px" cy="80px" rx="100" ry="50" style="fill:red;stroke-width:5;stroke:purple;"></ellipse> </svg><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="50" y1="10" x2="200" y2="200" style="stroke: rgb(255,0,0);stroke-width:2px"></line> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="200,10 250,50 160,80" style="fill:lime;stroke:purple;stroke-width:1px"></polygon> </svg><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:1px;fill-rule: nonzero;"></polygon> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon width="400" height="300" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5px;fill-rule: evenodd;"></polygon> </svg><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline cx="50" cy="10" points="0,40 40,40 40,80 80,80 80,120 120,120" style="fill:white;stroke:red;stroke-width:4"></polyline> </svg><br /> </body> </html> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70] ![在这里插入图片描述][2019062416550835.png] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]: /images/20211227/f5bfd36e9a324a2d8b4fd8c3c0891b53.png [2019062416550835.png]: /images/20211227/4401d7d1412e4759aae6da238695c264.png
还没有评论，来说两句吧...