导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

HTML 参考手册

HTML 元素(功能排序) HTML 浏览器支持 HTML 属性 HTML 全局属性 HTML 事件 HTML 颜色 HTML 画布 HTML 音频/视频 HTML 字符集 HTML 文档类型 HTML URL 编码 HTML 语言代码 HTML 国家代码 HTTP 状态消息 HTTP 请求方法 PX-EM 转换 键盘快捷键

HTML 标签

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <svg> 标签


实例

画一个圆:

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40"   stroke="green" stroke-width="4" fill="yellow" />
</svg>
亲自试一试 »

下面有更多实例。


定义和用法

<svg> 标签定义 SVG 图形的容器。

SVG 有几种绘制路径、框、圆、文本和图形图像的方法。

如需了解有关 SVG 的更多信息,请阅读我们的 SVG 教程


浏览器支持

元素          
<svg> 4.0 9.0 3.0 3.2 10.1

更多实例

实例

绘制一个矩形:

 <svg width="400" height="100">
 <rect width="400" height="100"   style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
亲自试一试 »

实例

用圆角绘制正方形:

 <svg width="400" height="180">
 <rect x="50" y="20" rx="20" ry="20"   width="150" height="150"   style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
亲自试一试 »

实例

绘制一颗星:

 <svg width="300" height="200">
 <polygon points="100,10 40,198 190,78   10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
亲自试一试 »

实例

绘制SVG徽标:

 <svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"   y1="0%" x2="100%" y2="0%">
 <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"   />
 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"   />
</linearGradient>
</defs>

<ellipse cx="100" cy="70" rx="85" ry="55"   fill="url(#grad1)" />

<text fill="#ffffff" font-size="45"   font-family="Verdana" x="50" y="86">SVG</text>
</svg>
亲自试一试 »

相关页面

HTML 教程: HTML SVG

SVG 教程: SVG 教程


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。