使用js动态添加SVG蒙版

Question

我正在使用jquery和two.js的组合来创建动画svg。我遇到了一个奇怪的错误，即标记添加不正确，而不是由浏览器呈现。

真奇怪的部分是，如果我在chrome中打开检查器，并选择掩码元素上的“编辑为html”并将任何额外元素添加到掩码中，则整个事件将按预期呈现。

我复制/粘贴HTML和发现这一点：

style="mask: url("#mask1");" 

我使用香草JS来设置样式：

document.querySelector('#two_106').style.mask = "url('#mask1')" 

，但无济于事。

这里的标记的重要位：

<svg version="1.1" width="1339" height="805" style="overflow: hidden; display: block; top: 0px; left: 0px; right: 0px; bottom: 0px; position: fixed;"> 

    <defs> 
     <mask id="mask1" x="0" y="0" width="1000" height="1000"> 
      <g id="two_2" transform="matrix(1 0 0 1 0 0)" opacity="1"> 
       <!-- path elements --> 
      </g> 
     </mask> 
    </defs> 

    <g id="two_106" transform="matrix(1 0 0 1 0 0)" opacity="1" style="mask: url(&quot;#mask1&quot;);"> 
<!-- path elements --> 
    </g> 

</svg> 

Answer 1

你真正想要这个...

document.querySelector('#two_106').style.mask = "url(#mask1)" 

单引号都被转换为HTML转义字符，但你并不需要他们无论如何。