HTML中SVG的symbol和use元素实现图标精灵复用引用的方法-html教程-PHP中文网

直接用+不能立刻显示图标是因为本身不渲染，必须确保的href正确指向同文档内带id的，且需设viewbox、避免写死颜色、id全局唯一。

html中svg的symbol和use元素实现图标精灵复用引用的方法

为什么直接用 `<symbol></symbol>` + `<use></use>` 不能立刻显示图标

常见现象是写好了 <symbol></symbol> 定义，<use></use> 也写了，但页面空白——根本原因是 <symbol></symbol> 本身不渲染，必须配合 <use></use> 且确保引用路径可解析。关键点在于：SVG 内部的 <symbol></symbol> 必须在同一个文档上下文（或通过 <use href="#id"></use> 引用）才能生效；跨文件引用需服务端支持或用 <object></object>/<iframe></iframe> 加载，而现代浏览器对外部 href 的 CORS 和 MIME 类型限制很严。

实操建议：

<symbol></symbol> 必须放在 <svg></svg> 根元素内，且带 id 属性（如 id="icon-home"），不能嵌套在其他容器里
<use></use> 的 href 值要以 # 开头，指向同文档内的 id，例如 href="#icon-home"
若把 <svg></svg> 放在底部（隐藏用），记得它得是 HTML 文档的一部分，不能只存在 JS 字符串或模板中未插入 DOM
IE 不支持 href 属性（需用 xlink:href 兼容），但现代项目通常可忽略 IE

`<symbol></symbol>` 里要不要设 `viewBox` 和尺寸

要，而且必须设。没有 viewBox 的 <symbol></symbol> 在 <use></use> 引用时无法正确缩放和对齐，容易变形或溢出。

实操建议：

每个 <symbol></symbol> 都应明确声明 viewBox，比如 viewBox="0 0 24 24"，与图标原始设计尺寸一致
不要在 <symbol></symbol> 上写 width/height —— 这些属性会被忽略；尺寸控制交给 <use></use> 或其父容器
如果图标内容用了 fill 或 stroke，建议设为 currentColor，这样能继承文字颜色，方便主题切换

多个 `<use></use>` 引用同一个 `<symbol></symbol>` 时样式怎么单独控制

直接给 <use></use> 元素加 class 或内联 style 是无效的——因为 <use></use> 是引用副本，样式不会穿透到内部图形。真正生效的是作用于 <use></use> 自身的 fill、stroke、transform 等继承属性，以及通过 CSS 变量间接影响 currentColor。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

实操建议：

给 <use></use> 加 class="icon icon--home"，然后用 CSS 设置 .icon { fill: currentColor; }，再单独定义 .icon--home { color: #007bff; }
需要不同大小？用 width/height 直接设在 <use></use> 上，或用 transform: scale(1.5)
避免在 <symbol></symbol> 内写死 fill="#000"，否则会覆盖 currentColor，除非你确定不需要动态着色

把 SVG sprite 放进底部还是提取成独立文件

放底部最简单可靠，适合中小型项目；独立文件方案看似模块化，但实际引入成本高、缓存策略难控、调试麻烦。

实操建议：

把所有 <symbol></symbol> 集中在一个隐藏的 <svg></svg> 块里，style="display:none" 或 aria-hidden="true"，放在前
不要用 <object src="icons.svg"></object> 方式加载外部 sprite —— <use></use> 无法跨文档引用其中的 id（除非服务端返回 MIME 为 image/svg+xml 且无 CORS 问题）
如果真要用外部文件，推荐用 JavaScript 动态 fetch 并注入 DOM，但要注意重复注入和 ID 冲突
构建工具（如 Webpack）可用 svg-sprite-loader，但它本质也是把 SVG 注入到页面 DOM 中，不是真正“外部引用”