vue.js 渲染 svg 差异：v-html 与直接写入模板

在使用 vue.js 渲染 svg 时，您可能会遇到一种情况，即相同的 html 代码在不同的渲染方式下表现出不同的结果。例如，通过 v-html 渲染的 svg 可能与直接写在模板中的 svg 渲染结果不同。

问题描述

在一个 vue.js 应用中，用户使用了以下相同的 html 代码来渲染一个 svg 图标：

立即学习“前端免费学习笔记（深入）”；

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

<p>通过下面的链接查看问题，template里面的html与v-html是一样的代码，但是表现差异巨大<br>demo </p>

回答

渲染差异的原因在于 vue 模板中 svg 的 viewbox 属性。在 v-html 渲染中，viewbox 属性可能被自动转换为小写（即 viewbox），而直接写在模板中的 svg 则使用驼峰命名（即 viewbox）。

要解决此问题，请将 vue 模板中 svg 的 viewbox 属性修改为 viewbox：

<svg viewBox="0 0 100 100">
  <!-- SVG 代码 -->
</svg>

这样，渲染出来的 svg 无论是通过 v-html 还是直接写在模板中，其显示结果都将保持一致。