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和直接写入模板有何差异？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
422
