Vue JS“范围”样式不适用于 SVG 内部元素答案

【问题标题】：Vue JS "scope" style does not work with SVG inner elementsVue JS“范围”样式不适用于 SVG 内部元素
【发布时间】：2021-01-19 04:32:31
【问题描述】：

我有一个包含 SVG 图标的按钮。当样式表为“范围”时，我无法更改 SVG 的颜色内部元素

组件代码：

<template>
  <a class="my-btn">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="..." fill="black" fill-opacity="0.54"/>
    </svg>
    <span>
      My Button Label
    </span>
  </a>
</template>

<style src="@/assets/css/my-custome-button.css"scope></style>

CSS 代码 (@/assets/css/my-custome-button.css)

a.my-btn:hover svg path {  
    fill: red !important;
    fill-opacity: 1;
}

问题

因为我在标签中使用了“范围”属性，Vue 会自动为匹配的元素分配一个属性，并相应地重写 CSS。看来 Vue 无法访问 SVG 内部元素。最终的 CSS 看起来像这样：

a.my-btn svg path[data-v-64222e86] {  
    fill: var(--danger) !important;
    fill-opacity: .9;
}

但输出的 SVG 不包含“data-v-64222e86”属性。

删除“范围”属性将解决问题，但非范围 CSS 可能会影响页面中的其他元素（意外结果）

关于如何拥有可以控制 SVG 元素样式的“作用域”CSS 代码的任何建议？

【问题讨论】：

标签： css vue.js debugging svg

【解决方案1】：

我通过使用:deep（::v-deep 的简写）选择器解决了这个问题：

a.my-btn:hover svg :deep(path) {  
    fill: red;
    fill-opacity: 1;
}

【讨论】：