Javascript 使用js动态添加SVG掩码
我将使用jquery和two.js的组合来创建一个动画svg。我遇到了一个奇怪的错误,即标记被错误地添加,而不是由浏览器呈现 真正奇怪的是,如果我在chrome中打开inspector,并在mask元素上选择“edit as html”,然后向mask添加任何额外的元素,整个过程就会按预期呈现 我复制/粘贴了html并发现:Javascript 使用js动态添加SVG掩码,javascript,jquery,svg,two.js,Javascript,Jquery,Svg,Two.js,我将使用jquery和two.js的组合来创建一个动画svg。我遇到了一个奇怪的错误,即标记被错误地添加,而不是由浏览器呈现 真正奇怪的是,如果我在chrome中打开inspector,并在mask元素上选择“edit as html”,然后向mask添加任何额外的元素,整个过程就会按预期呈现 我复制/粘贴了html并发现: style="mask: url("#mask1");" 我正在使用vanilla js设置样式: document.querySel
style="mask: url("#mask1");"
我正在使用vanilla 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("#mask1");">
<!-- path elements -->
</g>
</svg>
你真的想要这个
document.querySelector('#two_106').style.mask = "url(#mask1)"
单引号会转换为html转义字符,但您无论如何都不需要它们