Vue 3 中悬停 SVG 时为何会出现失真以及如何解决

在 Vue 3 中悬停 SVG 时解决 Blob 问题

导言

在使用 SVG 图标的 Vue 3 组件中，用户可能会在网络检查器的 "blob" 选项卡中看到 "blob"，尤其是在鼠标悬停在图标上或将其移到它们上面时。这种失真或拉伸是由 SVG 缩放机制导致的，可以通过设置 "preserveAspectRatio" 属性来解决。

问题

当 SVG 悬停时，其默认缩放行为可能导致失真，因为浏览器会根据窗口大小或其他动态因素重新计算其尺寸。这会导致 SVG 失去其原始宽高比，从而产生拉伸或模糊的外观。

解决方案

要解决此问题，需要在组件的 "onMounted" 钩子中设置 SVG 的 "preserveAspectRatio" 属性。此属性可确保 SVG 按照其原始宽高比进行缩放，从而防止悬停时出现失真。

onMounted(async () => {
    attributes.value.style = {
        "preserveAspectRatio": "xMidYMid meet",
    };
});

"xMidYMid" 表示将 SVG 水平和垂直居中，而 "meet" 表示缩放 SVG 直到其宽高比与视口匹配。

应用

以下是应用此解决方案的组件代码示例：

<template>
    <div :class="attributes.class" v-html="icon"></div>
</template>

<script>
import {ref, onMounted} from "vue";
import axios from "axios";

const iconCache = new Map();

export default {
    name: "Icon",
    props: {
        name: {
            type: String,
            default: "slash-circle-01",
        },
    },
    setup(props) {
        const icon = ref("");
        const attributes = ref({class: "shrink-0"});

        async function fetchIcon(iconName) {
            // 略
        }

        onMounted(async () => {
            // 略
            // 设置 "preserveAspectRatio" 属性
            attributes.value.style = {
                "preserveAspectRatio": "xMidYMid meet",
            };
        });

        return {icon, attributes};
    },
};
</script>

通过实施此解决方案，悬停 SVG 时就不会出现失真或拉伸，从而确保其按预期进行缩放。

常见问题解答

Q1：为什么在 Vue 3 中需要设置 "preserveAspectRatio" 属性？
A1：SVG 在悬停时失去原始宽高比，导致失真，因此需要设置此属性来保持其比例。

Q2：可以应用此解决方案到任何 SVG 图标吗？
A2：是的，此解决方案适用于所有 SVG 图标，无论其复杂性或大小如何。

Q3：除了防止失真之外，设置 "preserveAspectRatio" 属性还有什么好处？
A3：它还提高了 SVG 在不同屏幕尺寸和分辨率上的可缩放性。

Q4：是否可以动态调整 SVG 的 "preserveAspectRatio" 属性？
A4：是的，可以使用诸如 v-bind:style 之类的 Vue 指令在运行时动态设置 "preserveAspectRatio" 属性。

Q5：此解决方案是否也适用于其他框架或库？
A5：虽然该特定解决方案针对 Vue 3，但类似的方法可以应用到其他框架和库中，例如 React 或 Angular。

总结

通过在组件的 "onMounted" 钩子中设置 SVG 的 "preserveAspectRatio" 属性，可以在 Vue 3 中悬停 SVG 时消除 "blob"。此解决方案可确保 SVG 按其原始宽高比进行缩放，从而防止失真或拉伸，并增强其可缩放性和视觉美感。