Question

我有一个包含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;
}

问题

因为我在标记中使用了“ scope”属性，所以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代码的任何建议？

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

0 个答案: