如何为SVG元素边框设置悬停描边 避免内部元素继承描边样式

• 设在<svg>根节点上的fill、stroke类SVG渲染属性，会沿DOM树自动继承到所有内部子元素，这是你设置的描边跑到内部矩形、文本上的根本原因。
• 你当前代码里直接绑定在svg上的描边动画属性没有做作用范围隔离，导致内部所有元素都自动带上了根节点的描边配置。
• 代码中设置的border: 1px solid red是HTML盒模型层面的边框，和SVG内部的描边动画属于两套独立的渲染体系，会和后续的SVG描边效果产生视觉冲突，不需要的话可以直接移除。

1. 隔离描边作用范围
   • 给SVG内部的内容组<g id="Menu2">单独设置stroke: none，切断描边属性的继承链路，让内部的矩形、文本、图片元素完全不受根节点描边配置的影响。
2. 新增专用的外框描边层
   • 在SVG内部最底层（所有内容元素的前面）新增一个和SVG画布尺寸完全匹配的矩形，专门承载描边动画，避免和内容元素混同。这个矩形的尺寸要严格和viewBox保持一致：x=0, y=0, width=287, height=131。
3. 调整样式绑定关系
   • 把原来写在svg选择器上的描边、虚线动画相关属性，全部移动到这个专用外框矩形的选择器上。
   • 悬停触发逻辑修改为：当鼠标悬浮在svg上时，联动触发这个外框矩形的动画效果，不会干扰内部内容。

/* 原svg选择器上仅保留布局、交互类属性 */
svg{
   outline: none;
   position: absolute;
   background: transparent;
   cursor: pointer;
   left: 0;
   top: 0;
}    
/* 新增专用外框的样式，承载描边动画 */
#hover-frame{
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}
/* 给内容组加隔离，切断描边继承 */
#Menu2{
  stroke: none;
}
/* 悬停时联动外框做动画，同时给svg加背景变化 */
svg:hover {
  background: #4F95DA;
}
svg:hover #hover-frame {
  transition: 1s ease-in-out;
  stroke-dashoffset: -480;
}

对应的SVG结构调整，把外框矩形加到最前面：

<svg width="287" height="131" viewBox="0 0 287 131" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- 新增的专用外框层，必须放在最底层 -->
  <rect id="hover-frame" x="0" y="0" width="287" height="131"/>
  <g id="Menu2">
    <rect id="briefcase 1" x="118" y="22" width="51" height="51" fill="url(#pattern0)"/>
    <text id="label1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="84" y="107.652">Create Account</tspan></text>
  </g>
  <!-- 原有defs部分保持不变 -->
  <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image0" transform="scale(0.002)"/>
    </pattern>
    <image id="image0" data-name="briefcase.png" width="500" height="500" xlink:href="briefcase.png"/>
  </defs>
</svg>

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