<!--SVG指可伸缩矢量图形（Scaleble Vector Graphics）--> <!--SVG用来定义用于网格的基于矢量的图形--> <!--SVG使用xml格式定义图形--> <!--SVG图像在放大或者改变尺寸的情况下其图形质量不会有损失--> <!--SVG是万维网联盟的标准-->2、SVG绘制矢量图形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绘制矢量图形</title></head><body> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="60" cy="60" rx="50" ry="25"/> </svg> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="feOffset" x="-40" y="-20" width="100" height="200"> <feOffset in="SourceGraphic" dx="60" dy="60" /> </filter> </defs> <rect x="40" y="40" width="100" height="100" style= "stroke : #000000; fill: green; filter: url(#feOffset);" /> <rect x="40" y="40" width="100" height="100" style= "stroke : #000000; fill: green; " /> </svg> <svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/> </rect> </svg></body></html>3、引入外部SVG图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <iframe src="svg.svg" frameborder="no" width="400" height="200"></iframe></body></html><?xml version="1.1"?><svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5"> <textPath xlink:href="#MyPath"> ELLOWORLD 20170203 ELLOWORLD HAHAHAHA </textPath> </text> <!-- Show outline of the viewport using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /></svg>
新闻热点
疑难解答
