如何防止svg img受到任何伪类上按钮父变换属性的影响？

为了防止svg img受到任何伪类上按钮父变换属性的影响，可以采取以下步骤：

1. 使用CSS属性isolation来隔离svg元素：通过将isolation属性设置为isolate，可以将svg元素与其父元素进行隔离，从而避免受到父元素的变换属性的影响。示例代码如下：

svg {
  isolation: isolate;
}

1. 将svg img嵌套在一个具有非受影响的元素内：可以将svg img放置在一个具有非受影响的元素内，例如一个div元素，并将该div元素与按钮一同进行操作。这样，按钮父元素的变换属性将不会直接影响到svg img。示例代码如下：

<div class="container">
  <svg>
    <!-- SVG 图像内容 -->
  </svg>
</div>

1. 使用伪类选择器时避免直接在svg img上使用：如果要对按钮的伪类进行样式设置，可以避免直接在svg img上使用伪类选择器，而是将伪类选择器应用于包含svg img的父元素或其他非svg元素。这样可以确保svg img不会受到伪类上按钮父变换属性的影响。示例代码如下：

.button-container:hover .svg-container {
  /* 按钮伪类样式设置 */
}

<div class="button-container">
  <div class="svg-container">
    <svg>
      <!-- SVG 图像内容 -->
    </svg>
  </div>
  <!-- 按钮元素 -->
</div>

通过以上措施，可以有效防止svg img受到任何伪类上按钮父变换属性的影响。