SVG元素能否实现宽度过渡？修改x1属性无法触发CSS过渡的问题

因为SVG的x1/x2属性不在CSS过渡默认支持的可动画属性列表里，直接修改这些属性没法触发平滑过渡，给你几个实用的解决思路：

方法1：用CSS Transform缩放实现过渡 #

把线条的基础长度固定，通过scaleX/scaleY动态调整长度——transform属性是支持CSS过渡的，刚好适配你的需求。

以你当前的水平/垂直线条为例，调整SVG代码结构：把线条的起点设为0，终点设为固定长度（比如30，对应原来的-15到15的总长度），再用translate把线条居中，之后动态修改scale值即可：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"
    shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
    <rect width="160" height="160" rx="0" ry="0" transform="matrix(.707107 0.707107-.707107 0.707107 150 36.862915)"
        fill="none" stroke="#000" />
    <!-- 水平线条：基础长度30，translateX(-15)居中，动态绑定scaleX -->
    <line x1="0" y1="0" x2="30" y2="0" 
          :style="{ transform: `translate(120px, 150px) scaleX(${horizontalScale})`, transition: 'transform 0.3s ease' }"
          fill="none" stroke="#3f5787" stroke-width="3" />
    <line x1="0" y1="0" x2="30" y2="0" 
          :style="{ transform: `translate(150px, 150px) scaleX(${horizontalScale})`, transition: 'transform 0.3s ease' }"
          fill="none" stroke="#3f5787" stroke-width="3" />
    <!-- 垂直线条：用scaleY调整长度，对应修改translate位置 -->
    <line x1="0" y1="0" x2="0" y2="30" 
          :style="{ transform: `translate(150px, 120px) scaleY(${verticalScale})`, transition: 'transform 0.3s ease' }"
          fill="none" stroke="#3f5787" stroke-width="3" />
    <line x1="0" y1="0" x2="0" y2="30" 
          :style="{ transform: `translate(150px, 150px) scaleY(${verticalScale})`, transition: 'transform 0.3s ease' }"
          fill="none" stroke="#3f5787" stroke-width="3" />
</svg>

在Vue组件的data里定义horizontalScale和verticalScale（默认值设为1），修改时直接赋值（比如this.horizontalScale = 0.5）就能触发平滑过渡。

方法2：替换为rect元素，利用width/height过渡 #

如果线条是严格水平或垂直的，直接用rect代替line更直观——rect的width/height属性天然支持CSS过渡：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"
    shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
    <rect width="160" height="160" rx="0" ry="0" transform="matrix(.707107 0.707107-.707107 0.707107 150 36.862915)"
        fill="none" stroke="#000" />
    <!-- 水平线条：rect的height等于原stroke-width，width动态绑定 -->
    <rect :width="horizontalLength" height="3" 
          :style="{ transform: `translate(${135 - horizontalLength/2}px, 148.5px)`, transition: 'width 0.3s ease' }"
          fill="#3f5787" />
    <rect :width="horizontalLength" height="3" 
          :style="{ transform: `translate(${165 - horizontalLength/2}px, 148.5px)`, transition: 'width 0.3s ease' }"
          fill="#3f5787" />
    <!-- 垂直线条：rect的width等于原stroke-width，height动态绑定 -->
    <rect width="3" :height="verticalLength" 
          :style="{ transform: `translate(148.5px, ${135 - verticalLength/2}px)`, transition: 'height 0.3s ease' }"
          fill="#3f5787" />
    <rect width="3" :height="verticalLength" 
          :style="{ transform: `translate(148.5px, ${165 - verticalLength/2}px)`, transition: 'height 0.3s ease' }"
          fill="#3f5787" />
</svg>

这里horizontalLength默认设为30（对应原线条的总长度），修改时直接改变这个值，就能触发width/height的平滑过渡。

方法3：使用SVG原生animate元素（适合纯SVG场景） #

如果不想依赖CSS，也可以用SVG原生的<animate>元素配合Vue动态控制动画状态，但这种方式不如前两种结合Vue响应式的灵活：

<line x1="-15" y1="0" x2="15" y2="0" transform="translate(135 150)" fill="none" stroke="#3f5787" stroke-width="3">
  <animate attributeName="x1" :from="-15" :to="newX1" dur="0.3s" fill="freeze" />
</line>

不过这种方式需要手动触发动画，日常开发中还是前两种方案更省心。

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