# HTML5怎么内联SVG ## 什么是内联SVG 内联SVG（Inline SVG）是指直接将SVG代码嵌入到HTML文档中的技术。与通过`<img>`标签或CSS背景引用外部SVG文件不同，内联SVG允许开发者通过HTML标签直接操作SVG元素，实现更灵活的交互和样式控制。 ```html <!-- 示例：内联SVG基础结构 --> <svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="red" /> </svg> 可访问性
SVG元素可以通过DOM API直接访问，支持添加ARIA属性。
动态交互
可直接用JavaScript修改属性或添加事件监听：
document.querySelector('circle').addEventListener('click', () => { alert('Circle clicked!'); }); 样式控制
支持通过CSS直接修改样式：
circle { fill: blue; transition: fill 0.3s; } 性能优化
减少HTTP请求，适合小型矢量图形。
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> </svg> width/height：定义显示尺寸viewBox：定义画布坐标系（x,y,width,height）xmlns：必须的命名空间声明| 元素 | 示例 | 说明 |
|---|---|---|
<rect> | <rect x="10" y="10" width="50" height="30"/> | 矩形 |
<circle> | <circle cx="50" cy="50" r="40"/> | 圆形 |
<path> | <path d="M10 10 L90 10 L50 90 Z"/> | 路径 |
<text x="20" y="30" font-family="Arial" font-size="16"> 内联SVG文本 </text> <style> text { fill: #333; text-shadow: 1px 1px 2px #ccc; } </style> <svg> <defs> <symbol id="icon-arrow" viewBox="0 0 20 20"> <path d="M0 10 L15 0 L20 5 L10 15 Z"/> </symbol> </defs> <use href="#icon-arrow" x="50" y="50" width="20" height="20"/> </svg> <circle cx="50" cy="50" r="20" fill="red"> <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/> </circle> svg { max-width: 100%; height: auto; } XHTML需求
在XHTML文档中需添加正确的XML命名空间：
<svg xmlns="http://www.w3.org/2000/svg"> <!-- ... --> </svg> 旧版IE支持
IE9+支持内联SVG，旧版本需要polyfill如SVGeezy
安全限制
内联SVG中的<script>标签可能受CSP策略限制
<!DOCTYPE html> <html> <head> <style> .svg-container { border: 1px dashed #ccc; padding: 20px; } .interactive:hover { opacity: 0.8; cursor: pointer; } </style> </head> <body> <div class="svg-container"> <svg width="300" height="200"> <!-- 渐变定义 --> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ff0000"/> <stop offset="100%" stop-color="#0000ff"/> </linearGradient> </defs> <!-- 交互式矩形 --> <rect class="interactive" x="50" y="50" width="200" height="100" fill="url(#grad1)" onclick="alert('矩形被点击')"/> <!-- 动态文本 --> <text x="100" y="120" font-size="16" fill="white"> 点击测试内联SVG </text> </svg> </div> </body> </html> 内联SVG为HTML5提供了强大的矢量图形处理能力，结合DOM操作和CSS样式控制，能够实现传统图片无法完成的复杂交互效果。掌握内联SVG技术将显著提升前端开发者在数据可视化、UI图标等场景的开发效率。 “`
注：本文实际约1200字，包含代码示例、表格等结构化内容，可根据需要调整代码部分的详细程度。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
