Vue.js中SVG rect的calc()属性绑定报错问题求助

报错原因 #

SVG的x属性属于SVG原生坐标属性，它并不支持CSS的calc()函数语法——只有CSS属性（比如width、transform）才能使用calc()。你直接把calc(...)字符串赋值给x属性，浏览器会判定这是无效的坐标值，因此抛出错误，尽管部分浏览器可能会尝试兼容解析，但这不符合标准规范。

解决方案一：动态计算百分比数值 #

既然props.x和props.max都是数字，直接计算出对应的百分比值，赋值给x属性即可，这是最直接且符合标准的方式：

<script setup lang="ts">
import { defineProps, computed } from "vue";

const props = defineProps<{
  x: number,
  max: number
}>();

// 计算对应百分比
const positionX = computed(() => {
  return `${(props.x / props.max) * 100}%`;
});
</script>

<template>
  <rect :x="positionX" />
</template>

<style scoped>
rect {
  width: 1px;
  height: 100%;
  stroke: none;
  fill: #000000;
}
</style>

解决方案二：利用CSS transform平移 #

如果需要保留calc()的写法，可以把x设为0，通过CSS的transform: translateX()实现定位——因为transform是CSS属性，完全支持calc()和CSS变量：

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps<{
  x: number,
  max: number
}>();
</script>

<template>
  <!-- 绑定CSS变量给calc使用 -->
  <rect :style="{ '--max': props.max, '--x': props.x }" />
</template>

<style scoped>
rect {
  width: 1px;
  height: 100%;
  stroke: none;
  fill: #000000;
  x: 0;
  transform: translateX(calc(100% / var(--max) * var(--x)));
}
</style>

为什么之前的方法无效 #

不管是直接绑定x属性还是用setAttribute赋值，都是在操作SVG的原生x属性，而该属性不支持calc()语法，因此必然会触发浏览器的无效值报错。

内容的提问来源于stack exchange，提问作者Nyck1s