Vue.js渲染SVG时，v-html和直接写入模板有何差异？

一分耕耘，一分收获！既然都打开这篇《Vue.js渲染SVG时，v-html和直接写入模板有何差异？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

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

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

问题描述

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

<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 还是直接写在模板中，其显示结果都将保持一致。

今天关于《Vue.js渲染SVG时，v-html和直接写入模板有何差异？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！