Vue：使用范围镜时CSS不适用于D3的svg

Question

这是我组件的代码：

<template>
  <div id="something" class="card">
  </div>
</template>

const height = 200;
const width = 200;

let graph = d3
  .select('#something')
  .append('svg')
    .attr('class', 'chart-container')
    .attr('height', height)
    .attr('width', width);

<style lang="scss" scoped>
.chart-container {
  background-color: aquamarine;
}
</style>

svg确实应用了.chart-container类，但是没有应用样式

但是，当我从scoped中删除<style lang="scss">时，它会起作用。

为什么会这样？

Answer 1

我在svg样式方面的工作量很少，但是我知道您不能直接更改附加元素的样式。您需要深度选择器来应用

这是链接-https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

看看我创建的这个沙箱，它显示发生了什么事

只需看看components/helloWorld.vue

https://codesandbox.io/s/vue-template-qd1d4?fontsize=14