关于appendChild，事先设置的class样式无效

Question

        let nameSpace = 'http://www.w3.org/2000/svg'
        let path=document.createElementNS(nameSpace, "path");
        path = setAttr(path,{
          "class":"leaflet-ant-path",
          "stroke-linecap":"round",
          "style":"animation-duration:10s",
          "stroke":"#F7EB0A",
          "stroke-dasharray":"4,6",
          "stroke-width":"2",
          "fill":"none",
          "id":"child",
          d:"M"+a['l'][0]+" "+a['l'][1]+" L"+a['r'][0]+" "+a['r'][1]
        })
        let svg=this.$refs.line
        let svg=this.$refs.line
        svg.appendChild(path)
        
        

  .leaflet-ant-path
    fill none
    animation linear infinite leaflet-ant-path-animation

这是在我点击两个div元素之后，将一个path添加到svg中去，并且设置了clss和id，然后在stylue里面写好了样式，元素动态添加什么的都没有问题，添加的行内样式也都生效了，但是事先定义好的样式不生效，在页面f12检查根本看不到，就排除了权重覆盖的问题，想问下大佬们怎么解决这个问题呢？

Answer 1

你这个样式表我怎么感觉格式不对啊

Answer 2

你的样式是不是scoped的，我原先遇到过类似的问题，对于通过js添加的元素，放在scoped里面的类是不生效的。
如果是这个原因，你可以把这个类放在单独的一个style标签里面，这个style标签不要添加scoped属性。