这是在我点击两个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属性。