HTML代码中svg使用use元素引入图标-html教程-PHP中文网

use元素必须指向同文档内已解析的symbol，不能直接引用外部svg文件id；需确保symbol在use前定义、含viewbox、id严格匹配且唯一。

html代码中svg使用use元素引入图标

use 元素必须指向同一文档或内联的 `<svg></svg>` 定义

直接用 <use href="icon.svg#star"></use> 在多数现代浏览器里会失败——不是 bug，是规范限制。<use></use> 只能引用当前 HTML 文档中已定义的 <symbol></symbol>、<defs></defs> 或 <svg></svg> 内部元素，不能跨文件解析外部 SVG 的 ID。

常见错误现象：Failed to execute 'use' on 'SVGSVGElement': The provided value is not a valid URL 或图标空白无渲染。

正确做法：把图标定义（如 <symbol id="star">...</symbol>）放在当前 HTML 的 <svg></svg> 内（通常藏在页面底部、末尾），再用 <use href="#star"></use>
如果图标来自外部文件，得先用 fetch + DOMParser 加载并注入 DOM，或改用 <img src="icon.svg"> / <iframe></iframe> / CSS background
href 值必须以 # 开头，且 ID 必须存在且唯一；大小写敏感，#Star ≠ #star

内联 SVG symbol 模板必须设 `viewBox`，否则缩放失真

<symbol></symbol> 本身不渲染，只作模板；但它的 viewBox 决定了 <use></use> 实例的坐标系和缩放基准。漏掉 viewBox 会导致图标被裁切、比例错乱、甚至完全不可见。

使用场景：统一管理图标尺寸，让所有 <use></use> 实例通过 width/height 控制大小，而不依赖原始路径的绝对坐标。

<symbol id="home" viewbox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h-3V7c0-1.7.8-2.7 2.5-2.7 1.1 0 2.1.5 2.5 1.5v1.5c-.5-.5-1.2-.8-2-.8-2.2 0-3.6 1.2-3.6 3.6v2.5h-3v8h5v-8h-1z"></path></symbol>
不要写成 <symbol id="home"></symbol>（无 viewBox）——即使原始 SVG 有 width/height，<use></use> 也不会继承这些属性
viewBox 数值应与图标实际路径范围一致；可用工具导出时勾选“精简 + 保留 viewBox”

`<use></use>` 的样式继承行为容易误判

<use></use> 克隆的是结构，不是样式计算结果。它默认继承父容器的 fill/stroke 颜色，但不会继承通过 CSS 类名或复杂选择器设置的样式——除非该样式作用于 <use></use> 自身或其祖先，且未被内联 fill 覆盖。

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

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

下载

常见错误：给 <symbol></symbol> 内的 <path></path> 设了 fill="currentColor"，但父容器没设 color，结果图标变黑或透明。

推荐写法：<path fill="currentColor" ...></path> + 父元素设 color: #333 或 color: var(--icon-color)
避免在 <symbol></symbol> 里写死 fill="#000"，否则 <use></use> 无法通过 CSS 覆盖
<use></use> 上加 class 是有效的，但 class 规则需匹配 use > * 或 use path 才能生效（因克隆节点在 shadow DOM-like 机制下生成）

IE11 及更旧浏览器不支持 `href` 属性，要用 `xlink:href`

IE11 认可 xlink:href，但不识别标准 href；而 Chrome/Firefox/Safari 已弃用 xlink:href（HTML5 中非必需）。混用会导致验证警告或未来兼容风险。

解决方案不是二选一，而是双写：

<use href="#star" xlink:href="#star"></use>

现代浏览器读 href，IE11 回退读 xlink:href。注意：xlink: 命名空间在 HTML 文档中无需声明，但 XML/SVG 文件中需保留 xmlns:xlink。

构建工具（如 webpack + svg-sprite-loader）通常自动处理双写，手动维护时别漏掉
Vue/React 等框架中动态绑定 href 时，记得同时绑定 xlink:href（如 Vue 中 :xlink:href="'#' + iconId）
不建议用 JS 动态 setAttribute("xlink:href", ...) —— 在 IE11 中可能触发解析异常

真正麻烦的不是语法，是图标系统一旦嵌套多层、带动画或 filter，<use></use> 的实例间会共享引用状态，调试时容易误以为样式没生效，其实是底层 SVG 渲染树复用导致的。