Skip to content
本页目录

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

javascript
        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)
        
        
css
  .leaflet-ant-path
    fill none
    animation linear infinite leaflet-ant-path-animation

解决方法

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